Example between correct and incorrect item stacking
Please refere to the image. I have twee phones one with a screen width of 1440px and one with 1080px.On the 1440 screen the items are stacked in a two column structure. On the 1080 everything gets stacked on the left column. Is there a way to write a javascript function that looks at the device width and sets the item to adjust accordingly?
const Complex = () => {
return (
<View style={{ flex: 1 }}>
<CarouselCards />
<Divider
style={{
color: 'black',
backgroundColor: 'black',
marginHorizontal: 15,
}}
/>
<ScrollView horizontal={false}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{KPI.map((item) => (
<View style={styles.cardContainer} key={item.id}>
<View style={{ flexDirection: 'row' }}>
<View
style={{
flex: 1,
flexWrap: 'wrap',
}}
>
<View style={styles.cardContent}>
<Text style={styles.cardTitle}>{item.title}</Text>
<Text style={styles.bigFatNumber}>{item.value}</Text>
<Text style={styles.smallKPI}>{item.kpi}</Text>
<View style={{display:' flex'}}>
<BarChart
style={{ height: 100, width: 130 }}
data={barData}
svg={{ fill }}
contentInset={{ top: 1, bottom: 30 }}
></BarChart>
</View>
</View>
</View>
</View>
</View>
))}
</View>
</ScrollView>
</View>
)
export default Complex
const styles = StyleSheet.create({
cardContainer: {
backgroundColor: '#fff',
width: 168,
height: 190,
margin: 15,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
padding: 15,
},
chartContainer: {
backgroundColor: '#fff',
width: 168,
height: '100%',
margin: 15,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
padding: 15,
flexWrap: 'wrap',
display: 'flex',
},
cardTitle: {
// letterSpacing: 0.25,
fontStyle: 'normal',
fontSize: 14,
},
cardContent: {
alignItems: 'flex-start',
flexWrap: 'wrap',
gap: 6,
paddingVertical: 5,
},
bigFatNumber: {
letterSpacing: 0.25,
lineHeight: 36,
fontWeight: 'bold',
fontStyle: 'normal',
fontSize: 24,
},
smallKPI: {
letterSpacing: 0.25,
lineHeight: 24,
fontWeight: 'bold',
fontStyle: 'normal',
fontSize: 14,
order: 1,
color: 'rgba(0, 0, 0, 0.6)',
},
})
You can get device-width with Dimensions that you get in React native - https://reactnative.dev/docs/dimensions. Yust add your items fixed width(something like (width-yourMargin) / 3) or you can use flex and not use fixed width.
use
react-native-responsive-dimensions
use key word npm install for windows
npm i react-native-responsive-dimensions
import using that
import {
responsiveHeight as rh,
responsiveWidth as rw,
responsiveFontSize as rf,
} from "react-native-responsive-dimensions";
how to use
width:rw(100),
height:rh((100),
fontSize:rf(1.5),
Related
I'm making a system in which there is one horizontal ScrollView. But I don't know why, this scrollView doesn't work.
There is my code:
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
display: "flex",
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
display: "flex",
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>
I tried to remove and change some things but nothing change.
Could someone explain to me where the problem is?
Thanks you in advance I continue by my side!
You need to add a flex: 1 to the parent view of your elements. The following adjustment fixes your issue.
<ScrollView
pagingEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
style={{
margin: 10,
}}
>
{brandName.map((element, index) => {
return (
<View
style={{
flex: 1,
flexDirection: "row",
margin: 10,
left: 10,
}}
>
<Text
style={{
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
width: "55%",
height: "120%",
backgroundColor: "#ff7b0d",
color: "#fff",
textAlign: "center",
}}
>
{element}
</Text>
<TouchableOpacity>
<Text style={{right: 18}}>X</Text>
</TouchableOpacity>
</View>
);
})}
<View
style={{
flex: 1,
flexDirection: "row",
top: 5,
}}
>
<Text
style={{
paddingLeft: 10,
borderRadius: 20,
borderColor: "#ff7b0d",
borderWidth: 1,
backgroundColor: "#ff7b0d",
color: "#fff",
paddingHorizontal: 10,
paddingVertical: 3,
left: 10,
width: "60%",
height: "60%",
}}
>
Trie : {listOfSort}
</Text>
<TouchableOpacity>
<Text style={{paddingVertical: 3, right: 10}}>X</Text>
</TouchableOpacity>
</View>
</ScrollView>
For some reason when I'm trying to align the contents of the Card which is the Image and Card.Title it will always align it like a column, the two won't go next to each other.
However, if I put the flexDirection: "row" in the modal container (which contains these two cards) it puts the cards side by side as it should. Why would it not work on the contents of the card itself?
Thanks
<Provider>
<Portal>
<Modal Modal visible={themeVisible} onDismiss={hideThemeModal} contentContainerStyle={modalStyle}>
<Card containerStyle={{ backgroundColor: '#3D3D3D', margin: 0, padding: 0, borderWidth: 0, elevation: 0, borderColor: '#212121' }}>
<Card.Title style={{ color: '#FFFFFF', marginBottom: 0, fontSize: 25, marginTop: 10 }} >Theme Selection</Card.Title>
<Text style={{ color: '#AAAAAA', textAlign: 'center', marginBottom: 10 }} >Thanks for supporting Fitness!</Text>
</Card>
<TouchableOpacity onPress={hideThemeModal}>
<Card containerStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>
</TouchableOpacity>
</Modal>
</Portal>
</Provider>
Tried float: left, flexdirection, inline-block, etc no change
Here is the styles for modalStyle and the safeareaview style
const modalStyle = {
backgroundColor: '#3D3D3D',
padding: 20,
margin: 35,
borderWidth: 1,
borderRadius: 7.5,
borderColor: '#F3AF21',
};
const styles = StyleSheet.create({
container: {
display: "flex",
flex: 1,
backgroundColor: '#181818',
},
});
Card component has 2 props for styling. containerStyle is used to style the outer container while wrapperStyle for inner container. In your code you should replace containerStyle with wrapperStyle
<Card wrapperStyle={{ flexDirection: "row", backgroundColor: '#3D3D3D', marginTop: 10, paddingBottom: 30, padding: 30, borderWidth: 0, borderTopWidth: 1, borderBottomWidth: 1, elevation: 0, borderColor: '#212121' }}>
<Image style={{ width: 25, height: 25 }} source={require('./assets/yellow-dark.png')} />
<Card.Title style={{ color: '#FFFFFF' }} >Yellow / Dark</Card.Title>
</Card>
Note: You can adjust the other attributes in both the styles as per your need.
I am doing this to make a verticle line in between two numbers:
<View style={styles.ridesFriends}>
<Text style={styles.numbers}>132</Text>
<View style={styles.verticleLine}></View>
<Text style={styles.numbers}>2</Text>
</View>
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
}
However, the line doesn't appear in the exact middle. This is because 132 is longer than the number 2. If I change 132 to just 3, then the line appears in the center. Is there any way to fix the line in the middle?
Updated:
<View style={styles.ridesFriends}>
{/* <View style={styles.numbersContainer}> */}
<Text style={styles.numbers}>132</Text>
<View style={styles.verticleLine}></View>
<Text style={styles.numbers}>{numberOfFriends}</Text>
{/* </View> */}
</View>
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-evenly',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbersContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
num1: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
borderRightWidth: 1,
borderColor: '#909090',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: '900',
textShadowColor: '#000000',
textShadowRadius: 0.5,
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#E0E0E0',
//position: 'fixed',
},
As you have set the width of the parent to 100% you can easily wrap the number texts into views and set 50% each. The code would be like below
<View style={styles.ridesFriends}>
<View style={styles.numberWrap}>
<Text style={styles.numbers}>132</Text>
</View>
<View style={styles.verticleLine}></View>
<View style={styles.numberWrap}>
<Text style={styles.numbers}>2</Text>
</View>
</View>
Styles
ridesFriends: {
paddingTop: 60,
alignItems: 'center',
flexDirection: 'row',
// marginLeft: 2,
// marginRight: 3,
width: '100%',
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
},
numberWrap: {
width: '50%',
alignItems: 'center',
},
You can add a View component outside your text and style it with flex: 1 to equal separating space for your Text component.
Then you can add {alignItems: 'center',justifyContent: 'center'} in your Text container view to archive your component
Try mine:
<View style={styles.ridesFriends}>
<View style={styles.numbersContainer}>
<Text style={styles.numbers}>132</Text>
</View>
<View style={styles.verticleLine}></View>
<View style={styles.numbersContainer}>
<Text style={styles.numbers}>2</Text>
</View>
</View>
ridesFriends: {
paddingTop: 70,
alignItems: 'center',
flexDirection: 'row',
width: '100%',
marginBottom: 20,
},
numbersContainer: {
alignItems: 'center',
justifyContent: 'center',
flex: 1,
},
numbers: {
fontSize: 30,
color: '#31C283',
fontWeight: 'bold',
},
verticleLine: {
height: '100%',
width: 1,
backgroundColor: '#909090',
},
Hope that help :)
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 .....
I'm using native-base.
this is my code:
<View style={{width:'100%',height:45}}>
<Card style={{position:'absolute',zIndex:90,paddingTop: 0, marginRight:10,width: '100%', alignSelf: 'center',borderRadius:10,padding:10,height:45 }}>
<CardItem style={{ position:'absolute', zIndex:1,backgroundColor: '#fff', height: 45, width: '100%', paddingTop: 0, paddingBottom: 0, justifyContent: 'flex-end' }}>
<TouchableOpacity onPress={() => this.onClickSubs(sub)} style={{height:'100%',width:'100%'}}>
<Text onPress={() => this.onClickSubs(sub)} style={{ textAlign: 'center', fontSize: 16, color: colorConstants.GRAY_LIGHT_COLOR }}>{sub.title}</Text>
</TouchableOpacity>
</CardItem>
</Card>
<View style={{position:'absolute',zIndex:999,right:0,width:20,height:20,borderRadius:10,borderWidth:2,borderColor:'#fff',backgroundColor:colorConstants.PRIMARY_COLOR,alignSelf:'center',justifyContent:'center',alignItems:'center'}}>
</View> //circle view
</View>
but my circle view is background of Card:
Just add elevation value in your circle view style
<View
style={{
position: "absolute",
zIndex: 999,
right: 0,
width: 20,
height: 20,
borderRadius: 10,
borderWidth: 2,
borderColor: "#fff",
backgroundColor: "red",
alignSelf: "center",
justifyContent: "center",
alignItems: "center",
elevation:3 <-----------elevation in circle view---------
}}
/>
without elevation
with elevation