Related
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.
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),
in my react native app I want to have a bordered hexagon, I'm trying to achive this by having two hexagons one before the other, however for the bigger hexagon(2) I can't seem to get the proper dimensions, I got the first hexagon from a post in this blessed site, can anyone help me?
<View style={{width:125,height:125,position:'relative',alignItems:'center',justifyContent:'center'}}>
<View style={styles.hexagon2}>
<View style={styles.hexagonInner2}>
<View style={styles.hexagonBefore2}></View>
</View>
<View style={styles.hexagonAfter2}></View>
</View>
<View style={{width:125,height:125,position:'absolute',top:0,left:0,alignItems:'center',justifyContent:'center'}}>
<View style={styles.hexagon}>
<View style={styles.hexagonInner}>
<View style={styles.hexagonBefore}></View>
</View>
<View style={styles.hexagonAfter}></View>
</View>
</View>
</View>
Hexagon styles:
const styles = StyleSheet.create({
//this one is the small hexagon, no need to touch this one
hexagon: {
width: 100,
height: 55
},
hexagonInner: {
width: 100,
height: 55,
backgroundColor: 'rgb(1,121,111)'
},
hexagonAfter: {
position: 'absolute',
bottom: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderTopWidth: 25,
borderTopColor: 'rgb(1,121,111)'
},
hexagonBefore: {
position: 'absolute',
top: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderBottomWidth: 25,
borderBottomColor: 'rgb(1,121,111)'
},
//This ine is the bigger hexagon, the border
hexagon2: {
width: 100,
height: 55,
},
hexagonInner2: {
width: 100,
height: 55,
backgroundColor: 'rgb(1,121,111)',
},
hexagonAfter2: {
position: 'absolute',
bottom: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderTopWidth: 25,
borderTopColor: 'red'
},
hexagonBefore2: {
position: 'absolute',
top: -25,
left: 0,
width: 0,
height: 0,
borderStyle: 'solid',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderBottomWidth: 25,
borderBottomColor: 'red'
}
});
You can do this with the library react-native-svg which lets you make complicated shapes. Example I made here (https://snack.expo.dev/#heytony01/blissful-coffee)
and code below.
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import Svg, { Polygon } from 'react-native-svg';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const Hexagon = () =>{
return (
<Svg height="300" width="300" >
<Polygon
points="00,150 225,280 75,280 0,150 75,20 225,20 300,150 225,280 75,280 0,150 75,20 225,20 300,150 225,280 75,280 0,150, 75 20 225,20"
fill="lime"
stroke="lime"
strokeWidth="1"
>
</Polygon>
</Svg>
)
}
export default function App() {
return (
<View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
<Hexagon />
</View>
);
}
I am trying to drawing circle shape view for textview inside that some text.
It is working with Android, But, iOS not working properly. Text is coming top of the view.
<Text style={styles.na}> NA </Text>
styles
na: {
width: 60,
height: 60,
borderRadius: 60 / 2,
backgroundColor: 'orange',
alignItems: 'center',
textAlign: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
textAlignVertical: 'center',
marginRight: 10,
overflow: 'hidden',
},
Any suggestions?
try this code, works for me
<View style={{
width: 60,
height: 60,
justifyContent: "center",
borderRadius: 60 / 2,
backgroundColor: 'orange',
}}>
<Text style={{
alignSelf: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
}}>NA</Text>
</View>
try alignSelf : center
alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.
Reference
I am working on a little map application using react-native-maps. I am trying to render a floating action button on top of the map, but while I do see it flashing for a second, as soon as the map renders, it sits right on top of the button. I will paste my render code and styles below:
render() {
return (
<View style={{flex:1, backgroundColor: '#f3f3f3'}}>
<MapView ref="map" mapType="terrain" style={styles.map} region={this.state.region} onRegionChange={this.onRegionChange}>
<MapView.Marker coordinate={{latitude: this.state.region.latitude, longitude: this.state.region.longitude}}>
<View style={styles.radius}>
<View style={styles.marker} />
</View>
</MapView.Marker>
</MapView>
<ActionButton buttonColor="rgba(231,76,60,1)" style={styles.actionButton}>
<ActionButton.Item buttonColor='#9b59b6' title="New Task" onPress={() => console.log("notes tapped!")}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#3498db' title="Notifications" onPress={() => {}}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
<ActionButton.Item buttonColor='#1abc9c' title="All Tasks" onPress={() => {}}>
<Icon name="rocket" style={styles.actionButtonIcon} />
</ActionButton.Item>
</ActionButton>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
width: width,
height: height,
zIndex: 998
},
radius: {
height: 50,
width: 50,
borderRadius: 50 / 2,
overflow: 'hidden',
backgroundColor: 'rgba(0, 122, 255, 0.1)',
borderWidth: 1,
borderColor: 'rgba(0, 122, 255, 0.3)',
alignItems: 'center',
justifyContent: 'center'
},
marker: {
height: 20,
width: 20,
borderWidth: 3,
borderColor: 'white',
borderRadius: 20 / 2,
overflow: 'hidden',
backgroundColor: '#007AFF'
},
actionButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: 10,
zIndex: 999
},
actionButtonIcon: {
fontSize: 20,
height: 22,
color: 'white'
}
});
I had the same problem. I solved it by giving the map a negative z-index. Also, I used flex: 1, instead of width and height, but that shouldn't make a difference.
Like:
map: {
width: width,
height: height,
zIndex: -1
},
actionButton: {
position: 'absolute',
width: 20,
height: 20,
top: 10,
left: 10,
zIndex: 10
},
<Pressable style={{
zIndex: 5
flex: 1,
flexDirection:'row',
padding: 10,
position:'absolute',
bottom:"25%",
alignSelf: "center",
justifyContent: "space-between",
backgroundColor: '#4DDB81',
borderWidth: 0.5,
borderRadius: 10,
}}>
<Text style={{
fontSize: 30,
color: "#383838"
}}>Pressable
it is a long shot but try to add position: 'absolute' to your map styles and set its coordinates and see what happens