The following code displays a link in a React Native component. The borderRadius correctly renders on android devices but is not applied on iOS. Any ideas why?
import { A } from "#expo/html-elements";
...
const isTicketed = tickets ? (
<A style={styles.link} href={tickets}>
Find Tickets
</A>
) : null;
...
link: {
backgroundColor: "#BB9456",
color: "white",
fontFamily: "NunitoSans",
width: 120,
textAlign: "center",
marginTop: 20,
borderRadius: 8,
padding:8
},
Related
This is for the web development btw, not for Ios or Android
So this is my view
<View style={styles.fullView}>
<Video shouldPlay isLooping resizeMode="cover" source={require("./res/bg.mp4")} style={{flex: 1}}/>
</View>
And This is my Stylesheet
fullView: {
flex: 1,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
heading: {
color: 'white',
marginBottom: 100,
fontSize: 35,
},
input: {
padding: 6,
fontSize: 16,
width: 200,
textAlign: 'center',
color: 'white',
},
bgcolor: {
backgroundColor: '#33373861',
borderRadius: 15,
margin: 10,
},
button: {
alignItems: 'center',
backgroundColor: '#FBC1F0',
margin: 30,
borderRadius: 15,
padding: 10,
height: 45,
width: 200,
},
image: {
flex: 1,
}
What I am getting is this
What I need is the whole video on screen
I have tried to use resizeMode with cover,contain,stretch,repeat none of them work
Its Like the resizeMode is not recognized itself.
But when I change the height and width in stylesheet the video frame resizes But the video doesn't
Video Resolution is 3840 x 2160.
I want it to resize the video to screen size or adjust accordingly
thanks in advance.
I discovered this happens for web only because the Video html element is absolutely position for some reason.
If you add the following line to your onReadyForDisplay function it will fix it:
import { Video } from 'expo-av';
<Video
style={styles.video}
source={{
uri: 'http://path/to/file',
}}
useNativeControls={true}
resizeMode="contain"
onReadyForDisplay={videoData => {
videoData.path[0].style.position = "initial"
}}
/>
how to style react native expo picker in android , like changing the font Size and centering text and changing the background of the text input
<Picker
selectedValue={branch}
mode="dropdown"
style={{
// fontSize: 24,
// borderRadius: 14,
backgroundColor: '#BEDCEF',
height: 40,
// alignItems: 'center',
// justifyContent:'center',
// alignContent:'center',
// shadowColor:'black',
// shadowOffset:{width:0,height:2},
// shadowRadius:6,
// shadowOpacity:0.26,
width:350,
elevation:10,
// marginBottom:290
}}
itemStyle ={{
fontSize: 24,
alignItems: 'center',
justifyContent:'center',
color:'red',
backgroundColor:'purple'
}}
onValueChange={(itemValue, itemIndex) => setBranch(itemValue)}
>
the only option you have atm is to change the color of the drop down icon using the prop (supported in latest version)
dropdownIconColor={}
I am trying to achieve this layout*. And I've done it, but unfortunately, it is working only on iOs devices. On Android devices, when I press the button in the zone where it overlays the part of the screen which is not in the header doesn't work, even if it is displayed. Also, on Android this property "borderRightColor": ' doesn't seem to work properly. I didn't manage to find if those are some known bugs of the react-native framework or if is something wrong with my code. What can I do to create this layout on both platforms? I've created this snack with my code so far on this issue: https://snack.expo.io/#ivy.mihai/header-with-button-overlaying-the-screen
*Desired layout
How it looks what I've done on Android
How it looks what I've done on iOs
Put the semiCircle View before the button, and avoid zIndex.
The bottom of the button is out of its parent View, so when you touch this part of the button it doesn't work. The only workaround I could find online is to use the TouchableWithoutFeedback (or any Touchable) from the "react-native-gesture-handler" library.
This Touchable renders a bit differently, so I had to change a few things
Then I would add a few advises to go a little further :
Avoid TouchableWithoutFeedback for a button, user needs a Feedback. Prefer TouchableOpacity for ios and TouchableNativeFeedback for android.
Avoid circular icons for buttons. Prefer an icon on a circle View, the background of this View will be used for the ripple effect on android
I clarified the stylesheet and it gives the code below :
import React, { Component } from 'react'
import {
View,
StyleSheet,
Dimensions,
Platform,
TouchableNativeFeedback as RNTouchableNativeFeedback,
} from 'react-native'
import {
TouchableWithoutFeedback,
TouchableOpacity,
TouchableNativeFeedback,
} from 'react-native-gesture-handler'
import { Ionicons } from '#expo/vector-icons'
import { Button } from './src/components/BergamotUI'
const windowWidth = Dimensions.get('window').width
export default class App extends Component {
render() {
const color1 = 'red'
const color2 = 'yellow'
const Touchable = Platform.select({ ios: TouchableOpacity, android: TouchableNativeFeedback })
return (
<View style={styles.container}>
<View style={styles.header}>
<View style={styles.buttonContainer}>
<View style={styles.semiCircle} />
<View style={styles.button}>
<Touchable onPress={() => console.log('I am doing something')} useForeground={true}>
<View style={styles.iconWrapper}>
<Ionicons name="ios-add" color={'white'} size={34} />
</View>
</Touchable>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
button: {
overflow: 'hidden',
borderRadius: 50,
},
iconWrapper: {
backgroundColor: 'grey',
width: 50,
height: 50,
borderRadius: 50,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Platform.select({ ios: 4, android: 0 }),
paddingLeft: Platform.select({ ios: 2, android: 0 }),
overflow: 'hidden',
},
header: {
width: windowWidth,
height: 108,
borderWidth: 1,
borderColor: 'red',
alignItems: 'flex-end',
justifyContent: 'flex-end',
marginTop: Platform.OS === 'ios' ? Dimensions.StatusBarHeight : 0,
},
buttonContainer: {
position: 'absolute',
right: 10,
width: 80,
height: 40,
borderColor: 'transparent',
flex: 1,
alignItems: 'center',
paddingTop: 15,
//backgroundColor: 'blue',
},
semiCircle: {
position: 'absolute',
bottom: 0,
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 1,
width: 80,
height: 40,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
borderBottomWidth: 1,
borderBottomColor: 'white',
},
buttonContainer2: {
borderRadius: 50,
height: 50,
overflow: 'hidden',
},
button2: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
height: 50,
paddingHorizontal: 5,
},
})
Edit 1 : Add the point about the Touchable outside its parents, add TouchableNativeFeedback and TouchableOpacity and rewrote some style
I'm trying to add an image to left of my TextInput field but it's not working. I already tried putting the path, just the name of the image and also tried with require('path/to/image') but nothing seems to work.
I have something like this
<TextInput
value={this.state.value}
onChangeText={ (value) => this.setState({value})
inlineImageLeft="path/to/image"
/>
UIExplorer has an example on it, under the title 'Inline Images'.
react-native/Examples/UIExplorer/js/TextInputExample.android.js
It seems path should be relative to ./android/app/src/main/res/drawable/. Any other path does not work. Also image does not scale.
<TextInput inlineImageLeft="ic_menu_black_24dp"/>
follow the react native documentation and after adding images to drawable folder clean the project from build option in android studio and rerun the project with react-native run-android. it worked for me
This might not be the optimal solution but it worked for me. I created a flex with the icon on the left and the TextInput on the right. I styled it to my liking and created a box with a white background that encompasses both. Here is my css styling code:
container: {
flex: 1,
width: '100%',
height: '100%',
backgroundColor: '#f5f7fa',
justifyContent: 'flex-start',
alignItems: 'center',
},
inputBox: {
flex: 0,
flexDirection: 'row',
width: '90%',
backgroundColor: 'white',
borderRadius: 4,
margin: 5,
borderColor: '#c4c6c8',
borderWidth: 1,
},
textInputs: {
height: 60,
width: '86%',
backgroundColor: 'white',
borderRadius: 4,
color: '#c4c6c8',
}
If you are not familiar with Flexbox, you can also look at the following article:
https://medium.com/#drorbiran/the-full-react-native-layout-cheat-sheet-a4147802405c
and this website let's you play with the properties in live mode:
http://flexbox.buildwithreact.com/
I hope this helps :)
In my React Native application I add a borderRadius to my View component. Sometimes, there is a yellow background, even if I set backgroundColor:'transparent' to the view.
It disappears if I start scrolling. Is this issue known and is there a solution how I could fix that behavior?
This is how I render of my message components:
<View
style={styles.ownView}>
<Text style={[styles.text,styles.ownText]}>{this.props.doc.text}</Text>
<Image source={require('../../images/chat_own.png')}
style={{right:0,bottom:5,position:'absolute'}}/>
</View>
var styles = StyleSheet.create({
ownView: {
backgroundColor:'transparent',
flexDirection:'column',
alignItems:'flex-end',
marginBottom:15
},
text: {
color: 'white',
fontWeight: "200",
backgroundColor: "#817CD0",
borderRadius: 12,
padding: 10,
right: 0,
paddingRight: 60
},
ownText: {
marginRight: 10
}
});
The image is for the bubble part for the right or left side.