I'm trying to implement this type of text input, anyone has an idea to how to implement this ?
You can create a customInput like this, you will have to switch to props, currently I have hardcoded the values
const CustomTextInput = () => {
return (
<View style={{ paddingTop: 10 }}>
<Text
style={{
position: 'absolute',
top: 0,
left: 10,
zIndex: 100,
backgroundColor: 'white',
paddingHorizontal: 20,
}}>
Phone
</Text>
<View
style={{
borderWidth: 1,
borderColor: 'red',
flexDirection: 'row',
borderRadius: 10,
paddingHorizontal:5,
paddingTop: 5,
}}>
<AntDesign
name="star"
size={20}
color="black"
style={{ marginRight: 5 }}
/>
<TextInput value="12313" />
</View>
</View>
);
};
Output would be like
You can change the styles anyway you want.
You can try out the snack here
https://snack.expo.io/#guruparan/custominput
Related
Here is my Code snippet:
return (
<View style={{ backgroundColor: "#FFF", flex: 1 }}>
<ScrollView>
<Image
source={require("../images/image.jpg")}
style={{ width: "100%", height: "60%" }}
/>[![enter image description here][1]][1]
<View
style={{
flexDirection: "row",
alignItems: "center",
marginHorizontal: 55,
borderWidth: 2,
marginTop: 40,
paddingHorizontal: 10,
paddingRight: 30,
borderColor: "#00716F",
borderRadius: 23,
paddingVertical: 2,
}}
>
<Icon name="mail" color="#00716F" size={24} />
<TextInput
style={{ height: 40, width: "100%", paddingLeft: 5 }}
placeholder="Email"
value={email}
onChangeText={setEmail}
autoCapitalize="none"
autoCorrect={false}
/>
</View>
<View
style={{
flexDirection: "row",
alignItems: "center",
marginHorizontal: 55,
borderWidth: 2,
marginTop: 15,
paddingHorizontal: 10,
paddingRight: 30,
borderColor: "#00716F",
borderRadius: 23,
paddingVertical: 2,
}}
>
<Icon name="lock" color="#00716F" size={24} />
<TextInput
style={{ height: 40, width: "100%", paddingLeft: 5 }}
placeholder="Password"
secureTextEntry
value={password}
onChangeText={setPassword}
/>
</View>
<TouchableOpacity onPress={() => signin({ email, password })}>
<View
style={{
marginHorizontal: 55,
alignItems: "center",
justifyContent: "center",
marginTop: 30,
backgroundColor: "#00716F",
paddingVertical: 10,
borderRadius: 23,
}}
>
</View>
</TouchableOpacity>
<NavLink routeName="Signin" text="New User ? Signup Here." />
</ScrollView>
</View>
);
I have tried everything I don't know why my scroll view is not working
I have multiple TextInput elements but only a few of them only get rendered on the screen and the rest got trim. please help
here I am attaching the screenshot of the output
I am using react-native expo
is this any package problem
help me
Try set ScrollView property contentContainerStyle as below
<ScrollView
contentContainerStyle={{flex:0}}
>
The issue is solved
There was a very small mistake
I gave an element the margin of -200
So it was not scrolling
After i removed that margin
It was working smoothly
here is the code that is causing the issue
<ScrollView style={styles.scrollView}>
<TouchableHighlight
onPress={() => this.props.navigation.navigate("ACompose")}
>
<View
style={{
top: 1,
width: 300,
height: 50,
borderRadius: 20,
backgroundColor: 'white',
alignSelf: "center",
borderWidth: 5,
borderColor: 'rgb(14,59,88)',
}}>
<Text style={{ color: 'black', fontSize: 20, letterSpacing: 0, alignSelf: "center", top: 6, left: -15 }}>
New Announcement
</Text>
<Image
style={{ width: 30, height: 30, left: 222, bottom: 20 }}
source={
require('../assets/PLUS.png')
}>
</Image>
</View>
</TouchableHighlight>
</ScrollView>
I am new to JS and react native so if Im doing anything wrong let me know
You should try optional chaining if your preset supports it:
<TouchableHighlight
onPress={() => this.props.navigation.navigate("ACompose")}>
Otherwise, you need to check step by step:
<TouchableHighlight
onPress={() => this.props && this.props.navigation && this.props.navigation.navigate && this.props.navigation.navigate("ACompose")}>
Thanks for your time.
This is supposed to be very simple, but I am having trouble dealing with.
I have a "survey" which contains a few questions and 3 radio buttons for each question.
The problem is: when I select an option from any radio button, the same option is selected for every question.
I just need to change the value from this group only.
I am using RadioButton from react-native-paper.
The RadioButton.Group is supposed to deal with this but I am getting to nowhere.
How can I do this? I saw an example using react-native-simple-paper but it uses Classes and I using a Function component, so I can't use setState like almost every other library does.
Here's my code sample:
const [value, setValue] = React.useState('');
<ScrollView style={{ flexDirection: 'column' }}>
{questions &&
questions .map((p) => {
return (
<View style={{
//flexDirection: 'column',
elevation: 1,
borderRadius: 5,
backgroundColor: '#fff',
marginTop: 15,
marginLeft: 15,
marginRight: 15,
padding: 10
}}>
<Text
style={{
color: '#16416e',
fontFamily: 'Khula-Bold',
textTransform: 'capitalize',
fontSize: 20
}}>
{myCount++ + ' - ' + p.QUESTION_TEXT}
</Text>
<View style={{ marginTop: 15 }}>
<RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value} key={myCount - 1}>
<View style={{ flexDirection: 'row' }}>
<RadioButton key={"S" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="S" />
<Text onPress={() => { setValue("S") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }} >Sim</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<RadioButton key={"N" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="N" />
<Text onPress={() => { setValue("N") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>Não</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<RadioButton key={"NA" + myCount - 1} color='#1b2f75' uncheckedColor='#1b2f75' value="NA" />
<Text onPress={() => { setValue("NA") }} style={{ fontFamily: 'Khula-Bold', color: '#16416e', fontSize: 20, marginTop: 5, marginLeft: 5, paddingBottom: 15 }}>N/A</Text>
</View>
</RadioButton.Group>
</View>
</View>
);
})}
</ScrollView>
It is working using react-native-radio-buttons-group
Can provide you more detailed support.
So I'm making an app in react-native where the user can access to a list of users. He can access to the profile page of the user that he has chosen where he will find his name, a little description and more. So I'm looking for a way to display the next user and the previous user when we swipe right or left. Is it possible ? For now, I have only the user profile.
_displayDetailForUser = (idUser, name, photo, age, pratique, description, distance, connected, position, principale ) => {
console.log("Display user with id " + idUser);
this.props.navigation.navigate('UserProfil', { idUser: idUser, name:name, photo: photo, age:age, pratique:pratique, description:description, distance:distance, connected:connected, position:position, principale:principale });
}
render() {
return (
<View style={styles.view_container}>
<ScrollView>
<View style={styles.photo}>
<ImageBackground source={{uri:this.props.navigation.getParam('photo')}} style={{width: '100%', height: '100%'}}>
<View style={styles.photo_content}>
<LinearGradient colors={['transparent', 'rgba(0,0,0,0.5)']} style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 80 }} />
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View>
<Text style={{ fontSize: 50, color:'white' }}>{this.props.navigation.getParam('age')}</Text>
</View>
<View style={{ marginRight: 7, marginLeft: 7, backgroundColor: '#ffffff', width: 2, height: 30 }}></View>
<View style={{ flexDirection: 'column', flex:1 }}>
<Text style={{ fontSize: 20, fontWeight: '600', color:'white' }}>{this.props.navigation.getParam('name')}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{ fontSize: 18, color:'white' }}>{this.props.navigation.getParam('distance')}</Text>
<Text style={{ fontSize: 18, color:'white'}}>{this.props.navigation.getParam('pratique')}</Text>
</View>
</View>
</View>
</View>
<TouchableOpacity style = {{position:'absolute', aspectRatio:0.6, resizeMode:'contain', height:50, width:50, right:10, top:10}} onPress = {()=> Alert.alert("Chat")}>
<Image style = {{resizeMode:'contain', height:60, width:60, right:10, top:10}} source = {require("../Images/chat-bg.png")}/>
</TouchableOpacity>
</ImageBackground>
</View>
</ScrollView>
</View>
)
}
}
Thanks for the help !
render() {
return (
<View style={{ flex: 1}}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'10%',backgroundColor: '#BE6507',padding:10}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25}} source={require('../assets/back.png')} />
</TouchableWithoutFeedback>
<View/>
<View/>
{/*main content*/}
<ScrollView style={{padding:20,paddingTop:25 }}>
<View style={{alignItems:'center',marginBottom:20, width:Dimensions.get('window').width * 90 / 100}}>
<Image style={{height:"30%",width:"90%",marginBottom:10}} source={require("../assets/logo.png")}/>
<Text style={{fontSize: 21, color: "black",margin:6,marginBottom:25}}>ADD CARD DETAILS</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={(nameoncard) => this.setState({ nameoncard:nameoncard })}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={(card_num) => this.setState({ card_num:card_num})}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity style={{width:'90%',margin:10,backgroundColor:'black',padding:10,borderRadius:5,borderWidth:1,marginTop:20,marginBottom:20,height:45}}>
<Text style={{fontSize: 19,fontWeight: 'bold', color: "white", textAlign:'center'}}>Proceed to Pay</Text>
</TouchableOpacity>
</View>
</ScrollView>
);
In above code firstly i made a header for navigation.I want content below header to be scrollview.But above code does not seems to work and after half side of screen in vertical direction i does not see any views? What i am doing wrong here? How can i make scrollview to work correctly in above code?
You can try scrollEnabled with this.
First of all in your return of render() method you can have just one child. So, wrap the View and the ScrollView in a single View. You've also typos in the first section, look at how you're closing those Views: <View/> instead of </View>.
The correct code should be:
return (
<View style={{ flex: 1 }}>
{/*for header*/}
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: '10%',
backgroundColor: '#BE6507',
padding: 10,
}}>
<TouchableWithoutFeedback
onPress={() => this.props.navigation.goBack()}>
<Image
style={{ width: 25, height: 25 }}
source={require('../assets/back.png')}
/>
</TouchableWithoutFeedback>
</View>
{/*main content*/}
<ScrollView style={{ padding: 20, paddingTop: 25 }}>
<View
style={{
alignItems: 'center',
marginBottom: 20,
width: (Dimensions.get('window').width * 90) / 100,
}}>
<Image
style={{ height: '30%', width: '90%', marginBottom: 10 }}
source={require('../assets/logo.png')}
/>
<Text
style={{
fontSize: 21,
color: 'black',
margin: 6,
marginBottom: 25,
}}>
ADD CARD DETAILS
</Text>
<TextInput
value={this.state.nameoncard}
onChangeText={nameoncard =>
this.setState({ nameoncard: nameoncard })
}
placeholder={'Name On Card'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TextInput
value={this.state.card_num}
onChangeText={card_num => this.setState({ card_num: card_num })}
placeholder={'Card Number'}
placeholderTextColor={'black'}
style={styles.input}
/>
<TouchableOpacity
style={{
width: '90%',
margin: 10,
backgroundColor: 'black',
padding: 10,
borderRadius: 5,
borderWidth: 1,
marginTop: 20,
marginBottom: 20,
height: 45,
}}>
<Text
style={{
fontSize: 19,
fontWeight: 'bold',
color: 'white',
textAlign: 'center',
}}>
Proceed to Pay
</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);