We Keep Coding

Using % for width not working React Native

I am coding a project using expo react native and I made a horizontal scrollview for images. The images are styled correctly when pixels are used: <Image code... style={{width: 350}}/> However if I try to change the 350 to 35% the image disappears from the screen. I have tried several different ways to fix this problem, like adding a 100% width viewport for the parent class (like seen below), however it still is not working.
Here is the file of code:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image, ScrollView, Modal, Pressable } from 'react-native';
import tw from 'tailwind-react-native-classnames';
import { useState } from 'react';
export default function ImpEvents() {
const slides = ['https://patch.com/img/cdn20/users/22844250/20200421/014148/styles/patch_image/public/livingston-highschool-schoolpr___21133742706.jpg', 'https://patch.com/img/cdn/users/22844250/2015/05/raw/20150555523bf088bd6.jpg', 'https://patch.com/img/cdn/users/22821264/2014/08/raw/5400e8ea02f3c.png']
const [modalVisible1, setModalVisible1] = useState(false);
const [modalVisible2, setModalVisible2] = useState(false);
const [modalVisible3, setModalVisible3] = useState(false);
return (
<View style={{width: '100%'}}>
<Modal
animationType="slide"
presentationStyle='pageSheet'
visible={modalVisible1}
onRequestClose={() => {
setModalVisible1(!modalVisible1);
}}>
<View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style={{ fontSize: 80, alignSelf: 'center' }}>1</Text>
</Modal>
<Modal
animationType="slide"
presentationStyle='pageSheet'
visible={modalVisible2}
onRequestClose={() => {
setModalVisible2(!modalVisible2);
}}>
<View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style={{ fontSize: 80, alignSelf: 'center' }}>2</Text>
</Modal>
<Modal
animationType="slide"
presentationStyle='pageSheet'
visible={modalVisible3}
onRequestClose={() => {
setModalVisible3(!modalVisible3);
}}>
<View style={{ position: 'absolute', backgroundColor: 'grey', top: 10, alignContent: 'center', height: 5, width: '10%', alignSelf: 'center', borderRadius: 10 }}>
</View>
<Text style={{ fontSize: 80, alignSelf: 'center' }}>3</Text>
</Modal>
<Text style={{ left: 40, fontFamily: 'OpenSans_700Bold', marginTop: '70%', fontSize: 25, color: "#3D3D3D" }}>Important Information</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={{ paddingTop: 7, paddingLeft: 40 }} snapToInterval={370} decelerationRate={0}>
<Pressable onPress={() => setModalVisible1(true)} style={({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source={{
uri: slides[0]
}}
style={{ width: "35%", height: 175, borderRadius: 10 }}
/>
</Pressable>
<Pressable onPress={() => setModalVisible2(true)} style={({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source={{
uri: slides[1]
}}
style={{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</Pressable>
<Pressable onPress={() => setModalVisible3(true)} style={({ pressed }) => [
{
opacity: pressed
? '0.5'
: '1'
},
]}>
<Image
source={{
uri: slides[2]
}}
style={{ width: 350, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</Pressable>
<View
style={{ width: 50, height: 175, borderRadius: 10, marginLeft: 20 }}
/>
</ScrollView >
</View>
<View/>
)
}
So the image at index 0 is not being displayed but the images at indices 1 and 2 are being displayed when I don't use percentages.
Thanks for the help.

If you would like to use % you need to give a parent component width. Or there is another solution which you can get the width of the device in react native. You can achieve it using Dimension as below:
import { Dimensions } from 'react-native';
const ScreenWidth = Dimensions.get('window').width;
So in order to give 90% width of device you can use it like this width: ScreenWidth * 0.9.

It's Happening because Its parent component <Pressable> does not have the width style mentioned if you want to provide dynamic height or width in percentage then you must provide height and width to its parent component.
just give width: "100%" to its parent component and then check and if that does not work check the parent component of the parent component and backtrace it.

Setting width of container returns unexpected result in React-Native for JavaScript

I have a container <View style={styles.container}> in which is a <FlatList />.
An element rendered by the <FlatList /> is a card, styled like this
card: {
borderColor: 'green',
borderWidth: 2,
borderTopRightRadius: 7,
borderBottomRightRadius: 7,
borderBottomLeftRadius: 7,
backgroundColor: 'white',
padding: 5,
width: '100%',
height: 290,
},
There is snack here https://snack.expo.dev/90GJaJuPw
Now, there are two problems.
Why is <View style={styles.thisAffectsCardWidth} /> not horizontally in the center of the card?
Why is the the width of the card <View style={styles.card} /> getting larger, when one adjusts the width of thisAffectsCardWidth from e.g. 50% to 100%`?

Try removing alignItems: 'center' from the contentContainerStyle and add width: '100%' Eg: contentContainerStyle={{ width: '100%' }} and add alignItems: 'center' to the card styles.
https://snack.expo.dev/#charinda04/forlorn-cereal
Since you haven't set the contentContainerStyle width of the flatList, Width changes with thisAffectsCardWidth width.

React-Native KeyboardAvoidingView not working

Please do not mark this as duplicate.It is not. I haven't found any working solution for me.
So basically, I have been browsing stackoverflow and GitHub and I could get nothing working for me. If I set the behavior of KeyboardAvoidingView to padding nothing happens. However, position or height works fine, just as intended. Anyone has any ideea why? I need padding here, specifically. It doesn't matter where I put my KeyboardAvoidingView tag or what I wrap with it, it won't work.
Basically I am trying to get the <RichToolbar> to get pushed up when i open the keyboard. Seems easy, lost a day on it :(
I also tried the package containing KeyboardAwareScrollView, no luck.
I am currently using
react-native-cli: 2.0.1
react-native: 0.61.2
My code:
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="position">
<View style={styles.container}>
<ScrollView scrollEnabled={false} contentContainerStyle={styles.textEditorContainer}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<>
<TextInput
autoCorrect={false}
style={styles.title}
placeholder={Strings.screen.edit.titlePlaceholder}
onChangeText={this.onTitleValueChange}
value={titleValue}
/>
{divider}
<RichEditor
ref={this.setEditorRef}
initialContentHTML={this.props.initialEditorValue.content}
style={styles.textEditor}
/>
</>
</TouchableWithoutFeedback>
{this.renderCornerAnimation()}
<View style={styles.toolbarContainer}>
<RichToolbar
style={styles.toolbar}
getEditor={() => this.richText}
iconTint={'#000033'}
selectedIconTint={'#2095F2'}
selectedButtonStyle={{ backgroundColor: 'transparent' }}
/>
</View>
</ScrollView>
</View>
</KeyboardAvoidingView>
);
}
}
interface Style {
container: ViewStyle;
textEditorContainer: ViewStyle;
textEditor: ViewStyle;
title: TextStyle;
toolbarContainer: ViewStyle;
toolbar: ViewStyle;
toolbarButton: TextStyle;
lottieView: ViewStyle;
divider: ViewStyle;
iconSetContainerStyle: ViewStyle;
textInput: ViewStyle;
}
function createStyleSheet(colorScheme: ColorScheme): Style {
return StyleSheet.create<Style>({
container: {
flex: 1,
width: '100%',
height: '100%',
paddingTop: getStatusBarHeight(true),
backgroundColor: color[colorScheme].background,
alignItems: 'center',
},
textEditorContainer: {
width: screenWidth / 1.2,
backgroundColor: palette.white[1],
borderRadius: 40,
},
textEditor: {
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
width: '100%',
backgroundColor: palette.white[1],
},
title: {
backgroundColor: palette.white[1],
width: '100%',
padding: 5,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
fontWeight: '700',
fontSize: 20,
},
toolbarContainer: {
flex: 1,
minHeight: 35,
alignItems: 'center',
justifyContent: 'flex-end',
backgroundColor: color[colorScheme].background,
paddingBottom: getBottomSpace(),
},
toolbar: {
height: 35,
backgroundColor: color[colorScheme].background,
},
toolbarButton: {
fontSize: 12,
textAlign: 'center',
},
lottieView: {
position: 'absolute',
top: 0,
right: 0,
width: 20,
height: 20,
},
divider: {
width: '10%',
borderRadius: 4,
marginLeft: 8,
borderBottomWidth: 6,
},
iconSetContainerStyle: {
flexGrow: 1,
justifyContent: 'space-evenly',
alignItems: 'center',
},
textInput: {
color: color[colorScheme].text,
},
});
}

I am not a pro developer but try this hack....!
<View
style={{ flex: 1, }}>
<Modal
visible={state}
transparent={true}
>
<View style={{ flexDirection: 'column-reverse', flex: 1 }}>
<TextInput placeholder='wexneweyxuyfwwyfunwfyw' />
</View>
</Modal>
<View style={{ flex: 1 }}>
<TouchableOpacity style={{ flex: 1, backgroundColor: color.rebeccapurple }}>
<Text>Touch</Text>
</TouchableOpacity>
</View>
</View>
This will auto align textInput on top of keyBoard Thanks ..
also run the fucntion easy .....

zIndex doesn't work in component

I have a blue header which i want to take part of that on another view with an animate event. but before i execute animate function i set the zIndexes manually and knew it doesn't work at all!! means nothing will change when i give 1 or 100 or other value to zIndex property of my components :(
<View style={{ flex: 1 }}>
<Animated.View style={{
position: 'absolute',
top: 0,
left: 0, right: 0,
backgroundColor: 'lightskyblue',
height: headerHight,
zIndex: 1,//Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
alignItems: 'center',
}}>
<Animated.View style={{ position: 'absolute', top: titleTop }}>
<Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
</Animated.View>
</Animated.View>
<ScrollView style={{ flex: 1 }}
scrollEventThrottle={16}
onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }]
)}>
<Animated.View style={{
height: profileImageHight,
width: profileImageHight,
borderRadius: PROFILE_IMAGE_MAX_HIGHT / 2,
borderColor: 'white',
borderWidth: 3,
overflow: 'hidden',
marginTop: profileImageMarginTop,
zIndex:0, //Look here <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
marginLeft: 10,
}}>
<Image source={require('./assets/avatar.jpg')} style={{ flex: 1, width: null, height: null}} />
</Animated.View>
<Text style={{ fontWeight: 'bold', fontSize: 26, paddingLeft: 10 }}>Iman Salehi</Text>
<View style={{ height: 1000 }}></View>
</ScrollView>
</View>
like you see above: there are two components which has zIndex. so taking one which has zIndex:1 on the other is expected but there is no change bout them in run time.

Try elevation with zIndex and absolute position.
Apply below style on component which you want to show on front layer
style={{ position: 'absolute', elevation: 100,zIndex:100, //other style }}
Let me know if still facing issue

Try using elevation, that might help you to differentiate between the views.

React Native: Why doesn't <TextInput/> center with flexbox?

In React Native, I have a <TextInput/> but with flexbox style set to center it, yet it still does not and rather just sits to the left but only vertically centered. I tested it out with simple <Text/> and it centers correctly.
How can I center <TextInput/> with flexbox?
Here is the code:
render() {
return (
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, }}>
<TextInput
style={{fontWeight: 'bold', height: 18, color: 'red'}}
placeholderStyle={{fontWeight: 'bold'}}
placeholderTextColor='red'
placeholder='Center Me'
/>
</View>
)
}
}
Thank you in advance!
EDIT - with additional styles added
<View style=style={{alignItems: 'center', justifyContent: 'center', flex: 1,}}>
<TextInput
onChangeText={this._handleName}
value={this.props.name}
placeholderTextColor='white'
placeholder='Put in name'
style={{
backgroundColor: 'black',
borderWidth: 0,
borderRadius: 15,
width: 250,
height: 70,
fontFamily: 'Roboto',
fontSize: 20,
textAlign: 'center',
}}
/>
</View>

Add textAlign: 'center' to your TextInput component.
style={{fontWeight: 'bold', height: 18, color: 'red', textAlign: 'center'}}
The actual element is center aligned, but textAlign controls the alignment of the inner text and placeholder.
The result of adding the change to your code