Is it possible to style an inputs placeholder on React Native. This is an Input.
<TextInput style={styles.input}
onChangeText={(password) => this.setState({password})}
value={this.state.password}
placeholder='Password'
secureTextEntry={true}/>
How would I define styles.input to edit the placeholder's text color?
On css, a vendor prefixer is needed.
On TextInput documentation there is a prop called placeholderTextColor. The way you implement this property is in the following way:
<TextInput style={styles.input}
onChangeText={(password) => this.setState({password})}
value={this.state.password}
placeholder='Password'
placeholderTextColor'#COLORHERE'
secureTextEntry={true}/>
Only brief into the documentation when implementing it first but React Native's docs cover a lot.
This is how I have it, inside my same .js file:
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
}
image: {
width: 217,
height: 138
},
input: {
// your style
}
});
Related
I am using the default stack from react navigation, and in my navigator screen options I have my own custom header header: (props) => <Header props={props} />. In my screen, I have a background colour, and in my SafeAreaView I have a background colour. For illustration I have set them both to the same.
In my custom header I am applying margin of 15 horizontally as well as to the top. So it is the colour underneath the custom header.
My question is this: Where is this header background colour being set? (the light grey one)
Here you can see what I mean
I have tried headerStyle {backgroundColor}, but no difference (i believe because using header overrides a lot of these options? Unsure though as it is not stated in the documentation.)
For reference, I am basing it off of this documentation: https://reactnavigation.org/docs/native-stack-navigator/#options
However it appears that this background colour is being set somewhere else entirely? And so I'm not sure where.
I realize setting headerTransparent and applying margin for each screen is a viable solution but I figure there is a better way to simply set the background colour of this space correctly.
edit with header component:
export default function Header({ props }) {
const { navigation, route, options, back } = props;
const title = getHeaderTitle(options, route.name);
return (
<View style={styles.header}>
<View style={styles.container}>
{back && (
<IconButton
type="ion"
name="chevron-back"
size={26}
iconStyle={styles.backButton}
onPress={navigation.goBack}
/>
)}
<Text style={styles.title}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
width: screenWidth - 30,
height: 60,
borderRadius: 10,
padding: 15,
marginTop: 15,
backgroundColor: colors.white,
alignSelf: "center",
flexDirection: "row",
alignItems: "center",
},
backButton: {
zIndex: 1,
},
title: {
flex: 1,
textAlign: "center",
flexDirection: "column",
fontSize: 24,
fontWeight: "bold",
// marginLeft: -26,
},
header: {
backgroundColor: colors.neutral95,
},
});
I am trying to achieve a dismissible bar for my modal. Something like in this image:
What i am at right now
code:
<RootStack.Group
screenOptions={{
presentation: "modal",
gestureEnabled: true,
headerBackTitleVisible: false,
headerTitle: "",
hideNavigationBar: false,
gestureEnabled: true,
}}
>
<RootStack.Screen name="MyModal" component={ModalScreen} />
</RootStack.Group>
I am not sure if there is a built-in solution to that, but for sure you can hide the status bar per screen. In this case that's MyModal screen. And once you hide it you can implement a custom header that can be anything you wish it to be, but you will need to hook back actions etc.
Another way is to implement a custom Header, React Navigation has an API for that https://reactnavigation.org/docs/stack-navigator#header
Since there isn't a built in solution, you could achieve what you want by doing something like so:
(1) You will need to replace react-navigation's generated header with a custom one, like the following:
function LogoTitle() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require('#expo/snack-static/react-native-logo.png')}
/>
);
}
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerTitle: (props) => <LogoTitle {...props} /> }}
/>
</Stack.Navigator>
);
}
Source: https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component
(2) Your custom component would have to look something like this:
export default function App() {
const cancelButtonOnPress = () => {
navigation.goBack();
}
return (
<View style={styles.container}>
<View style={styles.bar}></View>
<Text onPress={()=>{cancelButtonOnPress()}} style={styles.cancelButton}>Cancel</Text>
</View>
);
}
const styles = StyleSheet.create({
cancelButton: {
color: '#0573ad'
},
bar: {
alignSelf: 'center',
width: 40,
height: 7,
backgroundColor: 'gray',
borderRadius: 40,
},
container: {
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
padding: 8,
borderWidth: 1,
borderColor: 'black',
},
});
The above App looks like the following:
(3) Since you are passing your custom component to react-navigation, the gesture swipe to dismiss the modal should be retained, if for some reason it isn't, you could try setting fullScreenGestureEnabled to true in screenOptions.
I am facing this issue in iOS, did same thing on this link React Native TextInput that only accepts numeric characters
but did not slove in iOS deivce
changes by setting state not reflecting in TextInput, below is my code:
constructor(props) {
super(props);
this.state = {
enteredMobile: '',
};}
onChanged(text){
this.setState({
enteredMobile: text.replace(/[^0-9]/g, ''),
});
}
My Text Input
<TextInput
placeholderTextColor="lightgrey"
placeholder="Enter mobile no."
keyboardType = 'numeric'
maxLength={10}
style={{height: 40,top:140, left :94,width:500, borderColor: 'white', borderWidth: 1}}
onChangeText={(text) => this.onChanged(text)}
value = {this.state.enteredMobile}
/>
You can see the updated one in the image below the table but its not updating TextInput itself.
Pankaj You have to code using ES6 JS in onChanged function because sometime it will not work in ES5 syntax.
Try this one
constructor(props) {
super(props);
this.state = {
enteredMobile: '',
};
}
onChanged = (text) => {
this.setState({
enteredMobile: text.replace(/[^0-9]/g, ''),
});
}
My Text Input
<TextInput
placeholderTextColor="lightgrey"
placeholder="Enter mobile no."
keyboardType = 'numeric'
maxLength={10}
style={{height: 40,top:140, left :94,width:500, borderColor: 'white', borderWidth: 1}}
onChangeText={(text) => this.onChanged(text)}
value = {this.state.enteredMobile}
/>
(iOS Only)
<TouchableOpacity> doesn't respond if it is inside of a <ScrollView> :
It works properly in the simulator but not in a real device,
keyboardShouldPersistTaps="always" doesn't make any difference
Partial code:<ScrollView style={styles.scrollView}>
<TouchableOpacity style={styles.xButton} onPress={() => this._onClose()}>
any suggestions?
--- Code update -----
<ScrollView style={styles.scrollView}>
<TouchableOpacity style={styles.xButton} onPress={() => this._onClose()}>
<Image style = {styles.xImg} source = {require('../../images/xbtn.png')}/>
</TouchableOpacity>
{this._renderPricing()}
{this._renderServices()}
</ScrollView>
and the Styling looks like this:
scrollView:{
width: width,
height: height,
}, xButton: {
position: 'absolute',
zIndex: 1,
marginTop: '1%',
marginRight: '3%',
alignSelf: 'flex-end',
},xImg: {
resizeMode: 'contain',
aspectRatio: .6,
opacity: 0.5,
},
The issue was solved. It was caused because in my separate rendering methods the this._renderPricing etc I was changing the state too many times 👎 therefore the JS thread was occupied so the TouchableOpacity couldn't respond to touch events see RN documentation for a more detailed explanation if needed. Thank you very much for your answers.
I seem to have a problem with a simple text field. The text inside is not wrapping. I'm running on an iOS 5s simulator. Any ideas?
Following the tutorial here: http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript
Styles:
var styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565',
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center',
},
Code:
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name, postcode or search near your location!
</Text>
</View>
I ran the exact code on rnplayground simulator, but the text did wrap correctly. If you had an outside flex container, you may need to specify the flexWrap property to 'wrap'.
rnplay.org/apps/x0Xf6w