React-Native Grid Style - react-native

With the following code:
<View style={{width:100,height:100,flexDirection:'row'}}>
<View style={{width:50, height:100}}>
a
</View>
<View style={{width:50, height:50}}>
b
</View>
<View style={{width:50, height:50}}>
c
</View>
</View>
--> I want to (IMAGE)
It is possible to do this with the "react-native-easy-grid" library.
However, it is possible to do this without using this library and with the above code structure. Without using rows and columns.
Can automatic placement be achieved by specifying only height and width values?


you can achieve this with flexbox:
<View style={{flex: 1, flexDirection:'row'}}>
<View style={{flex: 1, backgroundColor: 'red'}}>
<Text>a</Text>
</View>
<View style={{flex: 1, flexDirection:'column'}}>
<View style={{flex: 1, backgroundColor: 'green'}}>
<Text>b</Text>
</View>
<View style={{flex: 1, backgroundColor: 'blue'}}>
<Text>c</Text>
</View>
</View>
</View>

Related

Expo (React Native) <Left> and <Right> work on Android and not on iPhone

The purpose of the code below is to have texts on a same row in two columns, like a html table.
This Expo code works on Android, but Text inside the Left and Right are not showing on the iPhone.
<Text style={styles.form.title}>Title</Text>
<View style={{ justifyContent: 'center', }}>
<Left style={{paddingRight:200}}>
<Text style={{fontSize:17}}>First row</Text>
<Text style={{fontSize:17}}>Second row</Text>
</Left>
<Right style={{paddingLeft:150, marginBottom:230}}>
<Text style={{fontSize:17}}>First row</Text>
<Text style={{fontSize:17}}>Second row</Text>
</Right>
</View>

What package are you using for the Left and Right components? Maybe that package is not compatible with IOS.
You can just try this one. Im only using react-native components
<View style={{flex: 1}}>
<Text style={styles.form.title}>Title</Text>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={{paddingLeft:200, flex: 1}}>
<Text style={{fontSize:17}}>First row</Text>
<Text style={{fontSize:17}}>Second row</Text>
</View>
<View style={{paddingRight:150, flex: 1}}>
<Text style={{fontSize:17}}>First row</Text>
<Text style={{fontSize:17}}>Second row</Text>
</View>
</View>
</View>
You can also add backgroundColor just to see the views clearly. Try not to be dependent on packages since some of it are not compatible in all OS and expo.

ScrollView not scrolling in React Native

I just started learning how to use React Native and wanted to learn as I went while creating a simple project, I'm trying to create a ScrollView of card items but I can't seem to get it to scroll. I've been looking around stack overflow trying the solutions like flex:1 but I can't seem to get it to work.
Here is my code
<ScrollView contentContainerStyle={{flex:1}}>
<View style={{flexDirection:'row'}}>
<View style={{flex:0.5}}>
<View style={styles.card}><Text>Test</Text></View>
<View style={styles.card}><Text>Test2</Text></View>
<View style={styles.card}><Text>Test3</Text></View>
<View style={styles.card}><Text>Test4</Text></View>
<View style={styles.card}><Text>Test5</Text></View>
<View style={styles.card}><Text>Test6</Text></View>
<View style={styles.card}><Text>Test7</Text></View>
</View>
<View style={{flex:0.5}}>
<View style={styles.card}><Text>Testi</Text></View>
<View style={styles.card}><Text>Testii</Text></View>
<View style={styles.card}><Text>Testiii</Text></View>
<View style={styles.card}><Text>Testiv</Text></View>
<View style={styles.card}><Text>Testv</Text></View>
<View style={styles.card}><Text>Testvi</Text></View>
<View style={styles.card}><Text>Testvii</Text></View>
</View>
</View>
</ScrollView>
My CSS :
const styles = StyleSheet.create({
card:
{
height:'20%',
margin:10,
borderWidth:1,
borderColor:'#000',
borderStyle:'solid',
}
});

You have given flex 0.5 to both of the children views,
So here make sure that contents don't have fixed size in flex.
You can remove this 0.5 flex and give instead width:'50%' also remove flex:1 which is causing your scroll view to utilizing only viewable height.
<ScrollView>
<View style={{flexDirection:'row'}}>
<View style={{width:"50%"}}>
<View style={styles.card}><Text>Test</Text></View>
<View style={styles.card}><Text>Test2</Text></View>
<View style={styles.card}><Text>Test3</Text></View>
<View style={styles.card}><Text>Test4</Text></View>
<View style={styles.card}><Text>Test5</Text></View>
<View style={styles.card}><Text>Test6</Text></View>
<View style={styles.card}><Text>Test7</Text></View>
</View>
<View style={{width:"50%"}}>
<View style={styles.card}><Text>Testi</Text></View>
<View style={styles.card}><Text>Testii</Text></View>
<View style={styles.card}><Text>Testiii</Text></View>
<View style={styles.card}><Text>Testiv</Text></View>
<View style={styles.card}><Text>Testv</Text></View>
<View style={styles.card}><Text>Testvi</Text></View>
<View style={styles.card}><Text>Testvii</Text></View>
</View>
</View>
</ScrollView>
EDIT: also give height to card fixed instead of percentage because the view doesn't know what total size is so it cant calculate 20% exactly
see working eg. https://snack.expo.io/#jdgalani6297/scrolling-issue

Try below code:
<ScrollView style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={{ flex: 0.5 }}>
<View style={styles.card}><Text>Test</Text></View>
<View style={styles.card}><Text>Test2</Text></View>
<View style={styles.card}><Text>Test3</Text></View>
<View style={styles.card}><Text>Test4</Text></View>
<View style={styles.card}><Text>Test5</Text></View>
<View style={styles.card}><Text>Test6</Text></View>
<View style={styles.card}><Text>Test7</Text></View>
</View>
<View style={{ flex: 0.5 }}>
<View style={styles.card}><Text>Testi</Text></View>
<View style={styles.card}><Text>Testii</Text></View>
<View style={styles.card}><Text>Testiii</Text></View>
<View style={styles.card}><Text>Testiv</Text></View>
<View style={styles.card}><Text>Testv</Text></View>
<View style={styles.card}><Text>Testvi</Text></View>
<View style={styles.card}><Text>Testvii</Text></View>
</View>
</View>
</ScrollView>
Card CSS:
NOTE : Don't forget to import Dimensions
card: {
height: (Dimensions.get('window').height * 0.20),
margin: 10,
borderWidth: 1,
borderColor: '#000',
borderStyle: 'solid',
}

warning each child in an array or iterator should have a unique key prop. react native

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

How to overlap in react-native

Hi want to create UI in my react-native app like this
but I am getting like this
here is my code
<View style={{flex: 1,flexDirection:'row'}}>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
</View>
<View style={{justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<Item style={{backgroundColor:AppColors.colorPrimaryDark,
borderRadius:10,height:100, width:100, borderRadius:100/2}}></Item>
</View>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
<Item style={{backgroundColor:AppColors.white,borderRadius:10,flexDirection:'column',height:100, width:100}}></Item>
</View>
</View>
</View>

You have have to use position:'absolute' and put the circle element as the last element of the elements list so it comes to top (no need to use zIndex).
also the container div must have styles for child elements to be centered. There won't be an issue since you can position that container div where ever you want.
Following code works as you expected. (I replaced 'Item' with 'View' and different colors. You can change those things back)
<View style={{flex: 1,flexDirection:'row', backgroundColor:'green', justifyContent:'center', alignItems:'center'}}>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-end',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-end',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
</View>
<View style={{flexDirection:'column',justifyContent:'center',alignItems:'center',alignSelf:'center'}}>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-end',alignSelf:'flex-start',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
<View style={{flex: 1,flexDirection:'row',alignItems:'flex-start',alignSelf:'flex-start',margin:10}}>
<View style={{backgroundColor:'white',borderRadius:10,flexDirection:'column',height:100, width:100}}></View>
</View>
</View>
<View style={{justifyContent:'center',alignItems:'center',alignSelf:'center', position:'absolute'}}>
<View style={{backgroundColor:'blue',
borderRadius:10,height:100, width:100, borderRadius:100/2}}></View>
</View>
</View>

React Native: 2 scroll views with 2 sticky headers

I am trying to create a day-view with times on the left side, and a top header of people. Currently I can get the left OR the top header to stick, but not both.
How do you get 2 sticky headers?
My render looks like this:
<ScrollView style={{height: 600}}>
<ScrollView horizontal={true}>
<View style={styles.column}>
<View style={{ flex: 1, flexDirection: 'row', width}}>
{header}
</View>
<View style={styles.row}>
<View style={[styles.container, { width, marginLeft: 40 }]}>
{this.generateRows()}
</View>
</View>
</View>
</ScrollView>
<View style={{backgroundColor: 'white', position: 'absolute', top: 0, bottom: 0, left: 0, }}>
<View style={{ flex: 1, flexDirection: 'row'}}>
<View style={styles.row}>
<Text></Text>
</View>
</View>
<View style={{height: 1000, width: 40 }}>
{this.generateRowLabels()}
</View>
</View>
</ScrollView>

Can you try changing the top-level ScrollView to View/FlexBox with flexDirection as 'column'? This will cause the inner ScrollViews to fit into the window size.