I want to place a text and a toggle button in such a manner that the Text should be there at flex-start and the toggle would be there at the flex end. I have come up with the following code :
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
<View pointerEvents="none" style={{justifyContent: "flex-end"}}>
<Switch value={true} />
</View>
</View>
</TouchableRipple>
But the view is coming as follows:
How can I put the same at the end ?
Any help would be appritiated.
Here try this
<TouchableRipple onPress={() => { }}>
<View style={{flexDirection: 'row'}}>
<View style={{flex:1}}> //wrap Text inside view with flex 1
<Text style={{ fontSize: 18, fontWeight: "bold" }}>
<FontAwesome5 name="bookmark" size={16} /> Booked
</Text>
</View>
<View pointerEvents="none" style={{flex:1,justifyContent: "flex-end"}}> //add flex 1 here
<Switch value={true} />
</View>
</View>
</TouchableRipple>
Related
Is there any way to make Modal appear from left to right?
Right now I have this and its only sliding from bottom to top:
<Modal animationType={'slide'} visible={showModal}>
<View
style={{
backgroundColor: 'blue',
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
}}>
<TouchableOpacity onPress={() => setShowModal(false)}>
<Feather name="menu" size={40} color="red" />
</TouchableOpacity>
</View>
</Modal>
You can use npm i react-native-modal to get your desired result.
<Modal
animationIn="slideInLeft"
animationOut="slideOutRight"
animationInTiming={500}
animationOutTiming={750}
isVisible={showModal}
useNativeDriver={true}
onBackButtonPress={() => {
setShowModal(!showModal);
}}>
<View
style={{
backgroundColor: 'blue',
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
}}>
<TouchableOpacity onPress={() => setShowModal(false)}>
<Feather name="menu" size={40} color="red" />
</TouchableOpacity>
</View>
</Modal>
In ios it is ok however when i click input in android, button appears over keyboard and it seems so bad. how can i handle that ? this is my code:
<>
<SafeAreaView style={styles.container}>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
keyboardShouldPersistTaps="handled"
style={styles.scrollviewStyle}
>
<FormInput label="1" />
<FormInput label="2" />
<FormInput label="3" />
<FormInput label="4" />
<FormInput label="5" icon={true} />
<Text
style={{
color: '#938E8E',
marginLeft: 30,
fontSize: 14,
fontWeight: '400',
}}
>
text
</Text>
<Dropdown />
<View style={styles.agreementContainer}>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}
>
<CheckBox onPress={chekboxButton} checked={toggleCheckBox} />
<TouchableOpacity>
<Text style={styles.acceptagreementStyle}>
text
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
</SafeAreaView>
</>
this button comes over keyboard:
<View style={styles.buttonContainer}>
<Button buttonText="1" onSubmit={() => console.log('test')} />
</View>
If I understood your question correctly, you can easily fix this problem using
<KeyboardAvoidingView> https://reactnative.dev/docs/keyboardavoidingview
and wrapping your component with that.
this is because android:windowSoftInputMode property in AndroidManifest.xml which is set to adjustResize by default
you have 2 solutions
1 : change your android/app/src/main/AndroidManifest.xml
<activity
....
android:windowSoftInputMode="adjustPan">
2 : use react-native-android-keyboard-adjust
import AndroidKeyboardAdjust from 'react-native-android-keyboard-adjust';
.....
AndroidKeyboardAdjust.setAdjustPan();
I am trying to wrap the data present in a list and make the list swipeable using SwipeRow. But after I add the SwipeRow on top of my ListItem tag, the content is not displayed.
I have tried using renderItem but that seems unrelatable and doesn't work.
return(
// <SwipeRow style={{backgroundColor:'red'}}>
//body={
<View style={{backgroundColor: 'red'}}>
<ListItem style={{ width: '100%' }} onPress={() => this.navigationTo(this.props.data.h)}>
<View style={{ marginHorizontal: 15, alignSelf: 'flex-start' }}>
{this.props.data.iconType === 'Material' ? (
<MaterialIcon style={{}} size={24} name={this.props.data.i} color="#87898B" />
) : (
<MaterialCommunityIcons style={{}} size={24} name={this.props.data.i} color="#87898B" />
)}
</View>
<View>
<Text style={styles.heading}>{this.props.data.h}</Text>
<Text style={styles.description}>
{this.props.data.dp}{' '}
<B>
{count} {this.props.data.db}
</B>{' '}
{this.props.data.da}.
</Text>
<Text style={styles.metadata}>{this.props.data.m}</Text>
</View>
</ListItem>
</View>
// }
// </SwipeRow>
);
Probably try giving some styles to SwipeRow assuming you have imported the swipeRow
You can use renderRow in ListView
<ListView
style={{flex: 1, backgroundColor:'red'}}
dataSource={this.props.data}
renderRow={ data => (
<SwipeRow
leftOpenValue={75}
rightOpenValue={-75}
>
<View style={{ marginHorizontal: 15, alignSelf: 'flex-start' }}>
{this.props.data.iconType === 'Material' ? (
<MaterialIcon style={{}} size={24} name={data.i} color="#87898B" />
) : (
<MaterialCommunityIcons style={{}} size={24} name={data.i} color="#87898B" />
)}
</View>
<View>
<Text style={styles.heading}>{data.h}</Text>
<Text style={styles.description}>
{data.dp}{' '}
<B>
{count} {data.db}
</B>{' '}
{data.da}.
</Text>
<Text style={styles.metadata}>{data.m}</Text>
</View>
</SwipeRow>
)}
/>
render() {
return (
<View style ={styles.container}>
{/*for header*/}
<View style = {{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',width:'100%',height:'09%',backgroundColor: '#009AFF'}}>
<TouchableWithoutFeedback onPress={() =>this.props.navigation.goBack()}>
<Image style={{width: 25, height: 25,margin:10}} source={require('../assets/clinic/left-arrow.png')} />
</TouchableWithoutFeedback>
<View>
<Text style={{fontSize: 21,fontWeight: 'bold', color: "white",paddingRight:25}}>Dummy</Text>
</View>
<View>
</View>
</View>
{/*for main content*/}
<ScrollView style={{width:'100%',height:'90%'}} contentContainerStyle={{ flexGrow: 1 }} nestedScrollEnabled={true}>
<View>
<View style = {{width:'100%',height:'45%',backgroundColor: '#009AFF',justifyContent:'center',alignItems: 'center'}}>
<Text style={{fontSize: 18,fontWeight: 'bold', color: "white",paddingRight:25}}>John Alison</Text>
</View>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.submitButton}>
<Text style={styles.submitText}>Update</Text>
</TouchableOpacity>
</View>
</ScrollView>
</View>
)
}
Above code i have implemented in react native for learning purposes.But in above code ScrollView does not works,means it does not scrolls,why? i have tried many possible ways like setting flex and flexGrow equal to 1,enabling nested scrolling but it does not works.What is wrong with my code
I have build React Native App and I face Problem for "Api" t did not give
me an error but i gives me a warring or Each items should have unique key I
didn't find any solution for how i solve this.
how to I use unique key in function
**
How to fix reactjs warning: each child in an array should have a unique prop…? 2**
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View style={styles.card_contanier}>
<TouchableOpacity
style={{ flex: 1 }}
// onPress={() => this.onforward()}
>
<View style={{ height: "45%" }}>
<Image
source={require("../img/special-page-banner.jpg")}
style={{
flex: 1,
width: imageWidth,
resizeMode: "stretch"
}}
/>
</View>
<View style={styles.title}>
<Text
style={{ color: "black" }}
numberOfLines={2}
ellipsizeMode={"tail"}
>
{videoData.name}
</Text>
</View>
<View style={{ height: "20%" }}>
<View style={styles.buttom_contanier}>
<View style={styles.logo}>
<Thumbnail
source={require("../img/andy-sm.png")}
style={{ height: 32, width: 32 }}
/>
</View>
<View style={{ flexDirection: "column" }}>
<View style={{ flexDirection: "row", left: 5 }}>
<Text
style={{ color: "black" }}
numberOfLines={1}
ellipsizeMode={"tail"}
>
{videoData.created_by_user.name}
</Text>
</View>
<View style={styles.iconic_contanier}>
<Icon name="calendar" size={10} style={{ top: 2 }} />
<Text style={styles.text}>10 Oct 2018</Text>
</View>
<View style={styles.iconic_contanier}>
<Icon name="eye" size={10} style={{ top: 2 }} />
<Text style={styles.text}>11 views</Text>
</View>
</View>
</View>
</View>
</TouchableOpacity>
</View>
);
})}
</View>
First and not the recommended approach will be tu use your index you get as second argument in your .map callback
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View key={index} style={styles.card_contanier}>
But using index is not recommended. If you have an id coming from your backend I will use it. This can cause problem with animation and thing like that if you use index.
<View style={styles.contanier}>
{this.props.data.map(function(videoData, index) {
console.log(videoData, "fetch3");
return (
<View key={videodata.id} style={styles.card_contanier}>
You can read about all this here https://reactjs.org/docs/lists-and-keys.html#keys
And article here about why not use index https://medium.com/#robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318