I have creating a comment modal in which user can add comment. This section has a list of comments and a text input field to enter comments and a button to submit comment but the problem is the I enter something in text input and then press button to submit comment but first time it closes the keyboard and then I need to press button again to add the text into the array.
My problem is why I need to press two times. Why on first time my keyboard got closed.
<KeyboardAvoidingView
style={{
display: "flex",
height: Dimensions.get("window").height,
width: Dimensions.get("window").width,
}}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<SafeAreaView
style={{
backgroundColor: "transparent",
flex: 1,
}}
>
<View
style={{ flex: 0.4, backgroundColor: "#000", opacity: 0.2 }}
></View>
<View
style={{
flex: 0.6,
backgroundColor: Colors.dark.text,
borderRadius: 20,
}}
>
<View
style={{
flexDirection: "row",
marginTop: "3%",
paddingVertical: height * 0.005,
marginVertical: "4%",
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
paddingHorizontal: "3%",
}}
>
<View style={{ flexDirection: "column", width: width * 0.8 }}>
<Text
style={{
fontFamily: "Roboto_700Bold",
fontSize: 10,
color: Colors.light.text,
opacity: 0.4,
}}
>
COMMENTS
</Text>
<Text
style={{
fontFamily: "Roboto_700Bold",
fontSize: 20,
marginTop: height * 0.01,
}}
>
{title}
</Text>
</View>
<TouchableOpacity
onPress={() => setCommentVisible(false)}
style={{
width: width * 0.15,
alignItems: "center",
justifyContent: "center",
}}
>
<SvgRedCross />
</TouchableOpacity>
</View>
<View
style={{
flex: 0.002,
backgroundColor: Colors.light.postText,
opacity: 0.2,
}}
>
<Text></Text>
</View>
<View style={{ flex: 0.87 }}>
<FlatList
data={allComment}
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => item.id}
key={(item, index) => item.qId}
renderItem={({ item, index }) => (
<View>
<View style={{ flexDirection: "column", padding: "3%" }}>
<Text
style={{
color: "#151617",
fontFamily: "Roboto_700Bold",
fontSize: 14,
}}
>
{item.name}{" "}
</Text>
<Text
style={{
color: "#151617",
fontFamily: "Roboto_400Regular",
fontSize: 13,
}}
>
{item.comment}{" "}
</Text>
</View>
<View
style={{
height: 0.5,
backgroundColor: Colors.light.postText,
opacity: 0.2,
marginTop: "3%",
}}
>
<Text></Text>
</View>
</View>
)}
style={{}}
pagingEnabled={false}
showsHorizontalScrollIndicator={false}
/>
</View>
<View
style={{
height: height * 0.08,
elevation: 2,
backgroundColor: "#fff",
flexDirection: "row",
alignItems: "center",
borderColor: Colors.light.tabSelection,
shadowColor: Colors.light.tabSelection,
shadowOffset: {
width: 0,
height: -3,
},
shadowRadius: 1,
shadowOpacity: 0.4,
position: "absolute",
bottom: 0,
flex: 0.2,
}}
>
<TextInput
style={{
fontWeight: "300",
fontStyle: "normal",
fontSize: 13,
fontFamily: "Roboto_400Regular",
paddingLeft: "5%",
paddingLeft: "5%",
color:
theme === true
? Colors.dark.postDateText
: Colors.light.postDateText,
width: "80%",
}}
value={comment}
onChangeText={(value) => {
setComment(value);
}}
maxLength={150}
clearButtonMode="always"
multiline={true}
placeholder="Write your comments here..."
placeholderTextColor={Colors.light.postDateText}
onSubmitEditing={() => Keyboard.dismiss()}
/>
//button code to submit comment
<TouchableOpacity
onPress={() => {
addComment(comment);
// Keyboard.dismiss();
}}
style={{ width: "20%", marginLeft: 10 }}
>
<SvgCommentArrow />
</TouchableOpacity>
</View>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
It may happened due to not specifying the keyboard type in the textinput props https://reactnative.dev/docs/textinput#keyboardtype.
also refer this
https://reactnative.dev/docs/keyboard
So far I've achieved this:
//code on data listing screen with a vertical flatlist
const DataListing = props => {
const memoizedValue = useMemo(() => renderItem, [props.coinData]);
const renderItem = ({item}) => {
return (
<View
style={{
flexDirection: 'row',
backgroundColor: item?.id % 2 ? '#ffffff' : '#f9f9f9f9',
height: 40,
alignItems: 'center',
}}>
{/* coin */}
{item.coin ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.coin}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* open time */}
{item.openTime ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.openTime}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* open */}
{item.open ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.open}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* high */}
{item.high ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.high}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* low */}
{item.low ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.low}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* close */}
{item.close ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.close}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* quote asset volume */}
{item.quoteAssetVolume ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.quoteAssetVolume}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* trade number */}
{item.tradeNumber ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.tradeNumber}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* tracker buy base */}
{item.takerBuyBase ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.takerBuyBase}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* tracker buy quote */}
{item.takerBuyQuote ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.takerBuyQuote}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* price change */}
{item.priceChange ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.priceChange}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* price change % */}
{item.priceChangePercent ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.priceChangePercent}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* previos close price */}
{item.prevClosePrice ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.prevClosePrice}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* last price */}
{item.lastPrice ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.lastPrice}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* open price */}
{item.openPrice ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.openPrice}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* low price */}
{item.lowPrice ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.lowPrice}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* price volume */}
{item.pricevolume ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.pricevolume}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* quote volume */}
{item.quoteVolume ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.quoteVolume}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* price open time */}
{item.priceopenTime ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.priceopenTime}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* price close time */}
{item.pricecloseTime ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.pricecloseTime}
</Text>
) : (
<View style={{width: 150}} />
)}
{/* created at */}
{item.created_at ? (
<Text style={{width: 150, textAlign: 'center', color: '#000000'}}>
{item.created_at}
</Text>
) : (
<View style={{width: 150}} />
)}
</View>
);
};
return (
<FlatList
showsVerticalScrollIndicator={false}
data={props.coinData}
keyExtractor={(item, index) => index}
renderItem={renderItem}
/>
);
};
export default DataListing;
// code on data attributes page
const DataAttributes = props => {
return (
// container
<View style={{flexDirection: 'row'}}>
{/* coin name */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
COIN
</Text>
</TouchableOpacity>
{/* open time */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
OPEN TIME
</Text>
</TouchableOpacity>
{/* open */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
OPEN
</Text>
</TouchableOpacity>
{/* high */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
HIGH
</Text>
</TouchableOpacity>
{/* low */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
LOW
</Text>
</TouchableOpacity>
{/* close */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
CLOSE
</Text>
</TouchableOpacity>
{/* quote asset volume */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
VOLUME
</Text>
</TouchableOpacity>
{/* trade number */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
TRADE NUMBER
</Text>
</TouchableOpacity>
{/* taker buy base */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
TAKER BUY BASE
</Text>
</TouchableOpacity>
{/* taker buy quote */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
TAKER BUY QUOTE
</Text>
</TouchableOpacity>
{/* price change */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
PRICE CHANGE
</Text>
</TouchableOpacity>
{/* price change percent */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
PRICE CHANGE %
</Text>
</TouchableOpacity>
{/* previos close price */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
PREVIOUS CLOSE PRICE
</Text>
</TouchableOpacity>
{/* last price */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
LAST PRICE
</Text>
</TouchableOpacity>
{/* open price */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
OPEN PRICE
</Text>
</TouchableOpacity>
{/* low price */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
LOW PRICE
</Text>
</TouchableOpacity>
{/* price volume */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
PRICE VOLUME
</Text>
</TouchableOpacity>
{/* quote volume */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
QUOTE VOLUME
</Text>
</TouchableOpacity>
{/* price open time */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
PRICE OPEN TIME
</Text>
</TouchableOpacity>
{/* price close time */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
borderRightWidth: 1,
borderColor: '#31313199',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
PRICE CLOSE TIME
</Text>
</TouchableOpacity>
{/* created at */}
<TouchableOpacity
style={{
flexDirection: 'row',
backgroundColor: '#FDE047',
height: 40,
width: 150,
alignItems: 'center',
justifyContent: 'center',
}}
onPress={() => {}}>
<Text
style={{
fontSize: 10,
fontWeight: '400',
color: '#000000',
}}>
CREATED AT
</Text>
</TouchableOpacity>
</View>
);
};
export default DataAttributes;
// then they are imported to home and put inside a horizontal scrollview
import DataAttributes from '../Components/HomeScreen/DataAttributes';
import DataListing from '../Components/HomeScreen/DataListing';
const HomeScreen = ({navigation}) => {
const [coinData, setCoinData] = useState([]);
useEffect(() => {
coinStastics();
}, []);
// fetching coin statistics
const coinStastics = async () => {
const header = {
'Content-Type': 'application/json',
};
await axios
.post(baseUrl + coin_statistics, '', {headers: header})
.then(res => {
setCoinData(res.data.data);
})
.catch(function (error) {
// handle error
console.log(error);
});
};
return (
<SafeAreaView
style={{
flex: 1,
alignItems: 'center',
}}>
<Header/>
{/* DATA */}
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<View>
{/* attributes for data */}
<DataAttributes coinData={coinData} setCoinData={setCoinData} />
{/* data section */}
<DataListing coinData={coinData} />
</View>
</ScrollView>
<Footer />
</>
)}
</SafeAreaView>
);
};
export default HomeScreen;
I am expecting something like this, where I can scroll the data portion vertically where the the column names / attribute names stay fixed but as soon I start scrolling horizontally all the columns should start to respond except the left most one, it should stay fixed along with it's COLUMN NAME on top
am using React native web and I have a Modal view as follows:
(am quoting only the return part as mostly it is a design related issue)
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{
backgroundColor: 'white',
height: '400px',
width: '450px',
}}>
<Text
style={{
fontFamily: 'Roboto',
fontWeight: 'bold',
fontSize: 18,
textAlign: 'center',
padding: 20,
}}>
{name}
</Text>
<View
style={{
borderBottomColor: '#18D0E4',
borderBottomWidth: 1,
}}
/>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: '5%',
padding: 20,
margin: '5%',
}}>
{reminder == 6 && toggle == 6 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Image
source={Images.circle}
style={{
height: 15,
width: 15,
marginTop: '2%',
paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
color: '#000',
marginLeft: 5,
}}>
Set Different reminder
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => reminderSet()}>
<Image
source={Images.circle_o}
style={{
height: 15,
width: 15,
marginTop: '2%',
paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Set Different reminder
</Text>
</TouchableOpacity>
)}
{vaccinatedOn == 1 && toggle == 1 ? (
<TouchableOpacity style={{flexDirection: 'row'}}>
<Image
source={Images.circle}
style={{
height: 15,
width: 15,
marginTop: '2%',
// paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => vaccinationSet()}>
<Image
source={Images.circle_o}
style={{
height: 15,
width: 15,
marginTop: '2%',
// paddingRight: '1%',
}}
/>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
marginLeft: 5,
color: '#000',
}}>
Vaccinated on
</Text>
</TouchableOpacity>
)}
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<DatePicker selected={date} onChange={(date) => setDate(date)} />
</View>
</View>
</View>
<View
style={{
flexDirection: 'row',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
width: '82%',
paddingTop: 20,
}}>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderRightColor: '#C0C0C0',
borderRightWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => navigation.goBack()}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#000',
}}>
Cancel
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
borderTopColor: '#C0C0C0',
borderTopWidth: 1,
borderLeftColor: '#C0C0C0',
borderLeftWidth: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 10,
}}
onPress={() => SaveData(id)}>
<Text
style={{
fontFamily: 'Roboto',
fontSize: 17,
fontWeight: 'bold',
color: '#000',
}}>
OK
</Text>
</TouchableOpacity>
</View>
</View>
</View>
the web view is appearing as follows:
However, as soon as I switch to mobile view, the modal disappears like follows:
Kindly let me know, where I have gone wrong, any lead would be appreciated, thank you in advance.
Let me know if anything else is required.
<View style={{ height: "100vh", width: "100vw" }}> should be added at Root to make it responsive over all platforms
Im trying to get my text view and button to center when the Keyboard is summoned.
I tried wrapping my SafeArea with KeyboardAvoidingView but that did not seem to work.
I also tried setting the KeyBoardAvoidingView behavior to position which also did not work.
Any guidance would be appreciated.
KeyboardAvoidingView does not seem to work as expected.
**Whats happening : **
**Heres my code : **
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.Os == 'ios' ? 'padding' : null}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{ flex: 1 }}>
<MapView
style={{ flex: 0.6 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
<Marker coordinate={location} />
</MapView>
<Fragment>
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
position: 'absolute',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
<Text
style={{
color: '#fff',
fontSize: 10,
padding: 5,
}}
>
(Tap to add)
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
}}
>
{'Existing Crossings'}
</Text>
</View>
</View>
</Fragment>
<View
style={{
flex: 0.4,
backgroundColor: '#376772',
margin: 5,
borderRadius: 5,
}}
>
<Input
placeholder="Enter Crossing name here"
inputStyle={{ color: 'orange' }}
rightIcon={
<Icon
name="edit"
size={25}
color="orange"
/>
}
placeholderTextColor={'orange'}
errorStyle={{ color: 'red' }}
/>
<Button
buttonStyle={{
margin: 10,
top: scale(10),
padding: 15,
backgroundColor: '#5cb85c',
borderRadius: 4,
}}
icon={
<Icon name="send" size={15} color="white" />
}
iconRight
titleStyle={{ fontWeight: 'bold' }}
title="Submit "
/>
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
</SafeAreaView>
Setting behavior to "position" worked for me by removing flex: 1 from styles, like
<KeyboardAvoidingView behavior="position">
{children}
</KeyboardAvoidingView>
Cheers!
I have used a flatlist to list 4 videos getting fetched from an API, however I want them to scroll one at a time, hence added viewpager to render each video as a separate page, however on adding viewpager I do not seem to retrieve the videos on front-end, however they are appearing on my logs.
Code with viewpager:
<ViewPager scrollEnabled={true} orientation={"vertical"} >
<FlatList
data={this.state.data.product}
scrollEventThrottle={1}
onEndThreshold={0}
renderItem={({ item }) => (
<View style = {{alignContent: 'stretch'}} >
<ScrollView scrollEventThrottle={1}>
<ViewportAwareVideo
repeat paused={this.state.videoPaused}
source={{ uri: item.urlVid }}
resizeMode = "cover"
preTriggerRatio={PRE_TRIGGER_RATIO}
retainOnceInViewport={false}
style={{width: width, height:height}}
innerRef={ref => this._videoRef = ref}
onViewportEnter={() => this._videoRef.play()}
onViewportLeave={() => this._videoRef.stop()}
/>
</ScrollView>
<View
style={{
position: 'absolute',
flexDirection: 'column',
alignItems: 'flex-end',
top: '50%',
right: 10,
}}>
<TouchableOpacity
onPress= {() => this.onButtonPress(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon
name="heart"
size={30}
color={this.state.likedItemIds.includes(item._id) ? "red" : "white"}
/>
</TouchableOpacity>
<TouchableOpacity
onPress={()=>this.shareProduct(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="share" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="whatsapp" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
<TouchableOpacity
onPress= {() => this.download(item)}
style={{
alignItems: 'center',
borderRadius: 60,
padding: 10,
}}>
<Icon name="download" size={30} color="white" />
</TouchableOpacity>
<Text style={{ right: 5, color: 'white' }} />
</View>
<View
style={{
position: 'absolute',
flexDirection: 'column',
top: '90%',
left: 10,
}}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Product', {_id: item._id})}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{ fontWeight: 'bold', fontSize: 20, color: 'white' }}>
{item.title} - {item.price}
</Text>
</View>
</TouchableOpacity>
</View>
</View>
)}
keyExtractor={ item => item._id}
/>
</ViewPager>
Please help me, and let me know why is it so?