Keyboard closed on click on button in react native - reactjs

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

Related

Multiple Flip Cards not able to scroll in Flatlist

native-card-flip" for creating flip cards and I need to have multiple flip cards so I have added that flip card in FlatList but the issue is that the list is not scrolling at all. I have tried it with ScrollView and .map() function but scrolling not working at all.
<FlatList
data={revision}
renderItem={({item, index}) => (
<CardFlip
style={{
width: width * 0.95,
height: height * 0.3,
marginBottom: height * 0.015,
marginTop: height * 0.015,
}}
duration={3000}
ref={card => (this['card' + index] = card)}>
<Card
style={{
width: width * 0.9,
borderRadius: 16,
backgroundColor: 'transparent',
height: height * 0.8,
}}>
<TouchableOpacity onPress={() => this['card' + index].flip()}>
<View
style={{
flexDirection: 'row',
backfaceVisibility: 'hidden',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: Colors.lightGrey,
borderRadius: 22,
width: width * 0.95,
height: height * 0.3,
}}>
<Text
style={{
color: Colors.heading,
textAlign: 'center',
marginBottom: 1,
fontSize: 20,
width: '92%',
}}>
Lorem Ipsum
</Text>
</View>
<View
style={{
position: 'absolute',
bottom: 10,
right: 10,
}}>
{/* <TouchableOpacity
onPress={() => {
this.card.flip();
setIsFlipped(!isFlipped);
}}
style={{justifyContent: 'flex-end'}}> */}
<Image
source={require('../assets/images/flip-front.png')}
/>
{/* </TouchableOpacity> */}
</View>
</TouchableOpacity>
</Card>
<Card
style={{
width: width * 0.95,
borderRadius: 16,
backgroundColor: 'transparent',
height: height * 0.8,
alignSelf: 'center',
}}>
<TouchableOpacity
style={{
width: width * 0.95,
height: height * 0.3,
}}
onPress={() => this['card' + index].flip()}>
{/* Flip Back */}
<View
style={{
flexDirection: 'column',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flex: 1,
paddingHorizontal: width * 0.05,
backgroundColor: Colors.white,
borderRadius: 22,
}}>
<Text
style={{
color: Colors.heading,
fontSize: 20,
marginBottom: '2%',
fontFamily: 'FiraSans-ExtraBold',
}}>
Lorem Ipsum
</Text>
<Text
style={{
color: Colors.heading,
fontSize: 16,
marginBottom: '2%',
textAlign: 'justify',
fontFamily: 'OpenSans-Regular',
}}>
{strings.dummyText}
</Text>
</View>
<View
style={{
position: 'absolute',
bottom: 10,
right: 10,
}}>
{/* <TouchableOpacity
onPress={() => {
this.card.flip();
setIsFlipped(!isFlipped);
}}
style={{justifyContent: 'flex-end'}}> */}
<Image source={require('../assets/images/flip-back.png')} />
{/* </TouchableOpacity> */}
</View>
</TouchableOpacity>
</Card>
</CardFlip>
)}
numColumns={1}
keyExtractor={(item, index) => index.toString()}
style={{marginTop: height * 0.01}}
showsVerticalScrollIndicator={false}
maxToRenderPerBatch={1}
/>
Please help me to figure out how can I achieve scrolling.

Vertical scrolling where attribute name row is fixed and horizontal scrolling where left most column is fixed in React Native

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

Why is the modal view not appearing for mobile browser?

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

KeyboardAvoidingView is not adjusting height

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!

react native touchable click for Android and ios conditional

I am trying to create multiple instances with touchable-click for Android and ios and I'm having trouble figuring out where to place the conditional I keep getting errors for unexpected token. I want to set a conditional where if the app is on android switch to touchablenativefeedback and if not stay with touchableopacity.
{Platform.OS === 'android' ?
<TouchableNativeFeedback
onPress={gotoedit}
style={{ justifyContent: 'center'}}
>
<View>
<Entypo
name={'edit'}
size={22}
color={Colors.offWhite}
style={{ paddingHorizontal: 10 }}
/>
{/* <View
style={{
marginLeft: 0,
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: Colors.red,
justifyContent: 'left',
alignItems: 'left',
}}
>
<Text style={{ color: Colors.offWhite, fontWeight: '600' }}>{UnreadNotifications && UnreadNotifications.length}</Text>
</View> */}
</View>
</TouchableNativeFeedback>
:
<TouchableOpacity
onPress={gotoedit}
style={{ justifyContent: 'center'}}
>
<View>
<Entypo
name={'edit'}
size={22}
color={Colors.offWhite}
style={{ paddingHorizontal: 10 }}
/>
{/* <View
style={{
marginLeft: 0,
width: 20,
height: 20,
borderRadius: 10,
backgroundColor: Colors.red,
justifyContent: 'left',
alignItems: 'left',
}}
>
<Text style={{ color: Colors.offWhite, fontWeight: '600' }}>{UnreadNotifications && UnreadNotifications.length}</Text>
</View> */}
</View>
</TouchableOpacity>
}
);

Resources