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={}
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"
}}
/>
I'm trying to position the callout at the bottom of the screen and have it fixed to this position even though the map is moving? Has anyone had any luck in achieving this with React Native Maps?
All my attempts have not fixed the callout to the bottom of the screen.
The only way I have found is to avoid using the callout component provided by react-native-maps.
Here is the code for the callout:
<Callout
tooltip
style={styles.itemContainer}
>
<CalloutSubview
style={styles.button}
onPress={closeCallout}
>
<Ionicons name="ios-close-circle" size={30} style={styles.icon} />
</CalloutSubview>
<SemiBoldHeadline
fontSize={18}
text={title}
marginTop={0}
marginBottom={4}
marginRight={30}
/>
<BodyText
fontSize={14}
lineHeight={18}
marginRight={30}
>
{editedString}
</BodyText>
<View style={styles.inlineContainer}>
<CalloutSubview onPress={() => RouteService.openMaps(coordinates.latitude, coordinates.longitude, title)}>
<SmallDirectionsButton />
</CalloutSubview>
<CalloutSubview onPress={readMoreFunction}>
<ReadMoreButton
text={'Read More'}
/>
</CalloutSubview>
</View>
</Callout>
Here is the styling of the callout:
const styles = StyleSheet.create({
itemContainer: {
borderRadius: 5,
borderWidth: 1,
borderColor: Colors.borderColor,
width: Layout.window.width - 100,
backgroundColor: Colors.white,
padding: 20,
paddingRight: 25
},
inlineContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
},
button: {
position: 'absolute',
top: 0,
right: 0,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 30,
zIndex: 10,
},
icon: {
color: Colors.almostBlack,
opacity: 0.5
}
});
If you need to render custom react components "statically" above the map you shouldn't build it with using the map's callout component. Instead, create a view and position it absolutely above the map component:
<>
<Map .../>
<View style={{ position: "absolute", bottom: "20"}}>
{/* Your custom view content goes here*/}
</View>
</>
The callout components are just build to be used directly within the map's context and are expected to move when the map moves.
I am new to React Native, I am unable to hide the border of TextInput.
Version: 0.55
I am giving my screen.
I want this:-
And I ended up with this:-
The corresponding code for this screen is:-
JSX:-
<View style={styles.emailContainer}>
<View style={styles.commonInput}>
<TextInput style={{ paddingLeft: 15, }} placeholder="Email" />
</View>
<View style={styles.emailIcon}>
<Image
style={{ width: 20, height: 20 }}
source={require('../../assets/images/envelope.png')}
/>
</View>
</View>
Styling Code:-
emailContainer: {
flexDirection: "row",
backgroundColor: '#ffffff',
height: 40,
marginTop: 25,
marginRight: 10,
marginLeft: 10,
borderRadius: 15,
backgroundColor: '#ffffff'
},
emailIcon: {
justifyContent: 'center',
alignContent: 'center',
justifyContent:'center'
},
commonInput: {
width: '90%'
}
How can I remove the bottom border from textInput?
Thanks.
Just set the underlineColorAndroid prop of TextInput to transparent or the color which is the background color of the input field.
The code should look like:
<TextInput underlineColorAndroid ='transparent' style={{ paddingLeft: 15, }} placeholder="Email" />
I would like to know how to apply shadow only to the main outer view. Here on applying shadow, it's getting applied to all the inner elements
The trick to make the shadow props of parent don't inherit to children element, is to set a background color to the component on which you set the shadow. For example that would be:
<View
style={{ backgroundColor: '#fff' }}
shadowOffset={{height: 10}}
shadowColor='black'
shadowOpacity={0.5}
>
<Text>{title}</Text>
</View>
Unfortunately this only works with colored backgrounds – when setting a transparent background with RGBA or 'transparent' is doesn't help.
I cannot really answer based on a simple image, but from my previous experience, setting shadow offset to the required height and width should do the trick for the iOS.
Read more about it here: Shadow Offset
Here's a picture of what my card looks like with the following style used:
marginLeft: 10,
backgroundColor: 'white',
shadowColor: 'blue',
alignItems: 'center',
shadowOffset: {width: 3, height: 3 },
shadowOpacity: 1.0,
borderRadius: 10,
My card View
Hope it works out well for you.
Display custom shadow color >= 28 or >= P for above Sdk level 28
Code
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<View
style={{
shadowColor: 'purple',
height: 150,
width: '90%',
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
//android specific
elevation: 10,
//ios specific
shadowOffset: { width: 1, height: 1 },
shadowRadius: 3,
shadowOpacity: 0.5,
}}>
<Text style={{ color: 'rgba(128,0,128,0.5)' }}>
Welcome to React Native
</Text>
</View>
</View>
In android we can adjust shadow by elevation property
In iOS we can adjust shadow by shadowOffset, shadowRadius,shadowOpacity property
Output android
Output iOS
Available library for further usage
react-native-shadow-2
react-native-drop-shadow
Create a Shadow.js
export const Shadow = (elevation) => { // Receive elevation as a prop
return {
elevation,
shadowColor: 'black',
shadowOffset: { width: 0, height: 0.5 * elevation },
shadowOpacity: 0.3,
shadowRadius: 0.8 * elevation,
};
};
import Shadow.js to the page where you want to apply
import Shadow from './Shadow' //path to Shadow.js
<View style={{Shadow(5)}}> // pass elevation as a prop to Shadow.js
</View>
if you want to use in styles
import Shadow from './Shadow' //path to Shadow.js
<View style={styles.shadow}>
</View>
const styles = StyleSheet.create({
shadow:{
...Shadow(5) //use spread operator
}
});
Why does iOS not center the text input control?
I am including the render and stylesheet
code:
left android, right ios
render() {
return (
<View style={styles.container}>
<TextInput
style={styles.input}
onChangeText={(text) => this.setState({text})}
underlineColorAndroid='rgba(0,0,0,0)'
value={this.state.text}
placeholder= 'username'
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#13493A'
}
input: {
height: 40,
width: 250,
borderRadius: 5,
backgroundColor: '#598176',
color: 'white',
marginTop: 30,
textAlign: 'center'
}
});
Thank you in advance,
Anthonie
Looking on the issue tracker, this appears to be a bug in React Native on iOS: #11892 So your code should work but doesn't. There is a listed workaround which is to add alignSelf: 'center' to the TextInput's styles (see example).