According to the Docs, default value for flexShrink in RN is 1. But, given the code below, I have to explicitly set it to 1 to make it work, it seems to be 0 by default. The expected behaviour is that all the inner containers should shrink in width, so that all of them fit in the screen, by default. but it does not behave like that, unless I uncomment the lines.
Thanks for your time
<View
style={{
flexDirection: "row",
}}
>
<View
style={{
backgroundColor: "green",
width: 100,
height: 200,
// flexShrink: 1,
}}
/>
<View
style={{
backgroundColor: "red",
width: 100,
height: 200,
// flexShrink: 1,
}}
/>
<View
style={{
backgroundColor: "blue",
width: 100,
height: 200,
// flexShrink: 1,
}}
/>
<View
style={{
backgroundColor: "maroon",
width: 130,
height: 100,
// flexShrink: 1,
}}
/>
</View>
It looks like the the documentation has been corrected by now.
Now it says:
flexShrink accepts any floating point value >= 0, with 0 being the
default value (on the web, the default is 1)
I found the change log of doc here:
https://github.com/facebook/react-native-website/commit/2007c56fd09262cdb6803a2193a65fe555ef8344
Latest doc here:
https://reactnative.dev/docs/flexbox
Posted on 12/31/2021
Related
Here is my view styling
<View
style={{
flexDirection: 'column',
marginTop: 15,
borderTopWidth: 2,
borderStyle: 'dashed',
borderTopColor: 'rgb(225, 225,225)',
margin: 20,
alignSelf: 'center',
paddingTop: 10,
}}
>
on android, I get a nice dashed line
on iOS, however, I get no line
and
WARN Unsuppported dashed / dotted border style
AND the rest of the containing view is not rendered at all
I have already mentioned in the comments that I do not know exactly why this is failing and it seems to me like a bug. There are similar issues on GitHub GitHub here, here and here.
Since it is working on Android but not on iOS, we could exploit the usage of overflow: hidden. This does not work on Android. This is iOS only! If the above works for you on Android, then you could use a conditional solution via the Platform module: Platform.OS === 'ios' ? ... : ....
<View style={{ overflow: 'hidden'}}>
<View style={{ borderStyle: 'dashed', borderWidth: 1, borderColor: 'red', margin: -2, marginTop: 0}} />
</View>
The trick is to use overflow: hidden for the parent, then set borderWidth: 1 while additionally setting a negative margin margin: -2. We reset the margin of the top back to zero. This fakes a top dashed border.
Here is an example with a child view, and how it will look on iOS.
<SafeAreaView style={{ margin: 20 }}>
<View style={{ overflow: 'hidden' }}>
<View
style={{
borderStyle: 'dashed',
borderWidth: 1,
borderColor: 'red',
margin: -2,
marginTop: 10,
}}>
<View style={{ height: 200, width: 200 }} />
</View>
</View>
</SafeAreaView>
it's not working because you set the borderTopWidth instead of borderWidth. if you want a dashed line you have two option in my opinion :
1- use library like react-native-dash
2- use this solution =>
<View style={{ height: 1, width: '100%', borderRadius: 1, borderWidth: 1, borderColor: 'red', borderStyle: 'dashed' }} />
This is how I managed:
<View style={{overflow: 'hidden'}}>
<View
style={{
borderStyle: 'dashed',
borderWidth: 1,
borderColor: '#000',
margin: -1,
height: 0,
marginBottom: 0,
}}>
<View style={{width: 60}}></View>
</View>
</View>
The text in my image is displayed but difficult to read because of the dark color of the said image. In order to solve the issue of the color of the text (it must be black), I was thinking of whitening the image. Do you have any solutions? I think I must insert something in a second && but not sure what.
Here is my code :
const [show, setShow] = useState(false);
...
<View
style={{
flex: 7.5,
justifyContent: "center",
}}
>
<div
onMouseEnter={() => {
setShow(true);
}}
onMouseLeave={() => setShow(false)}
>
{show && (
<Text
style={{
zIndex: 15,
fontSize: 20,
fontWeight: "600",
color: "black",
position: "absolute",
top: 50,
right: 250,
}}
>
SENSE
</Text>
)}
{show && (
<Text
style={{
zIndex: 15,
fontSize: 20,
fontWeight: "400",
color: "black",
position: "absolute",
top: 100,
right: 200,
width: 200,
}}
>
The small investment research platform
</Text>
)}
<Image
source={screen2}
style={{
width: "80%",
height: "80%",
marginBottom: 258,
marginTop: 12,
marginLeft: "-10%",
}}
/>
</div>
</View>
You can either reduce the opacity of the image or add filter to it. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/filter Good luck!
You need to create 2 new things: {!show && (<Image...} and {show && (<Image...}
.For the second one add an opacity <1 in order to whiten it.
I am implementing React Native Scroll View to handle the keyboard in my application layout, it works great but it is adding extra "padding" or whitespace below my components.
It is already styled with flex: 1 to take all the screen space. Here's the jsx code for App.js
<PaperProvider>
<StatusBar
barStyle="dark-content"
hidden={false}
backgroundColor="#00BCD4"
translucent={true}
/>
<KeyboardAwareScrollView
style={{ flex: 1 }}
>
<View style={styles.container}>
<UnitCard />
<UnitCard />
<Converter />
</View>
</KeyboardAwareScrollView>
</PaperProvider>
);
};
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
flex: 1,
backgroundColor: "#eee",
},
cards: {
flex: 1,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
});
For anyone who comes later, the contentContainerStyle should have flex: 1 and then it should work, not the style property.
<KeyboardAwareScrollView
contentContainerStyle={{flex: 1}}
>
I don't think flex:1 will work in your KeyboardAwareScrollView or event in default React Native ScrollView
If you want to make it wrap all of your screen height, my suggestion is:
const SCREEN_HEIGHT = Dimensions.get("screen").height;
<KeyboardAwareScrollView
style={{ height: SCREEN_HEIGHT }}
>
....
Seems to have worked with the following code.
<KeyboardAwareScrollView
style={{ backgroundColor: "#4c69a5" }}
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={false}
style={{ height: Dimensions.get("window").height }}
automaticallyAdjustContentInsets={false}
>
... components
<KeyboardAwareScrollView/>
Taken from https://medium.com/free-code-camp/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580
I have a view similar to the following
<View style={{
flex: 1,
paddingTop: 20,
flexWrap: 'wrap',
backgroundColor: 'pink'
}}>
<View style={{
flex: 1,
minHeight: 200,
flexGrow: 1,
backgroundColor: 'red',
}} />
<View style={{
flex: 1,
minHeight: 200,
flexGrow: 1,
backgroundColor: 'blue',
}} />
</View>
The above layout works on https://yogalayout.com. Two rectangles which get wrapped if in landscape mode. (When height and width are interchanged in yogalayout. 500x300 or 300x500)
But when used in react-native the child view takes only the width of the content in it. Does not get the default alignItems: 'stretch' behavior.
If I add alignContent: 'stretch' the child views are stretched to full width in portrait mode. But, in landscape mode, the views will not be wrapped.
Just needed to use flexBasis instead of minHeight for child views along with alignContent: 'stretch' in the parent view.
I'm using ListItem imported from native-base. ListItem is red and it's child View is yellow. As you can see from the screenshot, View style does not take entire width of ListItem, despite having a flex: 1. How can I make it so that View take entire width of ListItem?
See image here
<List>
<ListItem style={[styles.listitem, { backgroundColor: "red" }]}>
<View
style={{
flex: 1,
flexDirection: "column",
backgroundColor: "yellow"
}}
>
<Text style={styles.timeInfoHeader}>{this.props.totalUsage}</Text>
<Text style={styles.timeInfoSubHeader}>Total (hrs)</Text>
</View>
</ListItem>
</List>;
Stylesheet:
timeInfoHeader: {
fontSize: 40,
color: 'rgba(45, 145, 176, 100)',
textAlign: 'center'
},
timeInfoSubHeader: {
fontSize: 12,
color: 'rgba(209, 209, 209, 100)',
paddingBottom: 4,
marginBottom: 4,
textAlign: 'center'
},
listitem: {
width: '100%',
marginLeft: 0
},
Try this
listitem: {
marginLeft: 0,
flex:1,
paddingRight: 0
}
Just add width: '100%' on your view's styles.
Try this code snippet:
<ScrollView contentContainerStyle={{ flexGrow: 1 }} >
<View style={{ flex: 1 }} >
...
</View >
</ScrollView >
You can try this -
flexGrow: 1
Hope it helped someone =)
What causes this is the textAlign style on the timeInfoHeader. So you can either remove the textAlign style from timeInfoHeader or add a width: "100%" to listitem. Just glancing at your code, it seems you might be better off adding the textAlign to the child View of timeInfoHeader.