We Keep Coding

React Native make items responsive

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),

Reac-Native: hexagon with border

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>
);
}

Triangle Button Slider In ReactJS/MaterialUI

I'm struggling to make a perfect triangle button instead of a pizza slice button on a slider in Material UI and ReactJS, this is the task I want to complet exemple bellow:
And this is where I'm currently at:
//App
const CustumSlider = withStyles({
root: {
color: "transparent",
height: 2,
padding: '15px 0',
},
thumb: {
boxShadow: iOSBoxShadow,
marginLeft: -16,
width: 0,
height: 0,
borderLeft: "16px solid transparent",
borderRight: "16px solid transparent",
borderBottom: "16px solid #f39200",
cursor: "pointer",
marginTop: "9px",
'&:focus, &:hover, &$active': {
color: "transparent",
boxShadow: iOSBoxShadow,
'#media (hover: none)': {
boxShadow: iOSBoxShadow,
},
},
},
valueLabel: {
left: '-16px',
top: -25,
fontSize: 16,
fontFamily: "Nunito",
fontWeight: 700,
'& *': {
background: 'transparent',
color: '#f39200',
},
},
track: {
height: 15,
borderTopLeftRadius: "5px",
borderBottomLeftRadius: "5px",
color: "#003865",
},
rail: {
height: 15,
opacity: 0.5,
borderTopLeftRadius: "5px",
borderBottomLeftRadius: "5px",
borderTopRightRadius: "5px",
borderBottomRightRadius: "5px",
backgroundColor: "rgba(0, 0, 0, 0.4)",
},
mark: {
backgroundColor: '#bfbfbf',
height: 8,
width: 1,
marginTop: -3,
},
markActive: {
opacity: 1,
backgroundColor: 'currentColor',
},
})(Slider);
Is there any solution to getting a triangle button in the slider?

Just add
borderRadius: "0px",
to the thumb style
sandbox

React Native Map Renders On Top Of Everything

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

React Native backgroundColor overlay over image

I am using an image as the background for one of my pages. I'd like to add a backgroundColor with an opacity over the image. I'm not sure how I can achieve this with React Native.
render() {
return (
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
<Text>Hello</Text>
</Image>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
}
Here is how I'd achieve this on a web page: How to make in CSS an overlay over an image?

A cool thing you can do is drop an absolutely positioned view over it.
<View>
<Image source={require('./assets/climbing_mountain.jpeg')} style= {StyleSheet.absoluteFillObject}} resizeMode='cover'>
<Text>Hello</Text>
</Image>
<View style={styles.overlay} />
</View>
...
const styles = StyleSheet.create({
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.5)'
}
})
absoluteFillObject is the same as
{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}
If you want to be able to tap through your overlay, just set the pointerEvents prop on the view to none
docs: https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject

I was able to get this working thanks to #Kevin Velasco.
render() {
return (
<View style={styles.container}>
<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
</Image>
<View style={styles.overlay} />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: null,
height: null,
},
imageContainer: {
flex: 1,
width: null,
height: null,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(69,85,117,0.7)',
}
})

Here I use to solve my project, thansk to all:
<View>
<View
style = {{
//make overlay
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
//change this color to the other one which you want
backgroundColor: 'green',
}}
/>
<Image
source = {{ uri: Your-Image-Here }}
style = {{ height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 }}
/>
</View>

Make an overlay on react native image background: If you want to make an overlay on the background image ONLY in react native and not affect other elements that are inside the < ImageBackground> tag, do this:
//Fetching the background image from online, you can use any image source of your choice.
const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };
// Setting the background image for the view:
<View style={styles.GoProBox}>
<ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
<View style={styles.overlayView}/>
<Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
<GoProButton />
</ImageBackground>
//Stylesheet
const styles = StyleSheet.create({
GoProBox: {
width: '95%',
height: 200,
margin: 5,
backgroundColor: '#00cc00',
borderRadius: 10,
alignSelf: 'center',
overflow: 'hidden'
},
goProBgImage: {
width: '100%', height: '100%',
},
goProText: {
textAlign: 'center',
fontSize: 20,
marginTop: 10,
fontWeight: 'bold',
padding: 10,
color: 'white'
},
GoProButton: {
height: 60,
width: 200,
backgroundColor: 'red',
borderRadius: 15,
alignSelf: 'center',
justifyContent: 'center',
top: 50
},
overlayView: {
height: "100%",
width: "100%",
position: 'absolute',
backgroundColor: 'rgba(0, 204, 0, 0.5)',
}
})

this is how i dit it to get it work for me
const visaCard = require('../Images/card_visa.png');
const [iscardBloqued, setIsCardBolqued] = useState(false);
const [hideInfos, setHideInfos] = useState(true);
Here is How the component looks like
<View style={styles.imageContainer}>
<ImageBackground
source={visaCard}
imageStyle={{ borderRadius: wp(3) }}
style={styles.imageStyle}
resizeMode="cover"
>
{hideInfos && (
<TouchableOpacity activeOpacity={0.8} style={styles.cardWhiteButton}>
<FText style={styles.whiteButtonText}>Afficher les infos</FText>
</TouchableOpacity>
)}
{iscardBloqued && (
<View style={styles.overlay}>
<TouchableOpacity
activeOpacity={0.7}
style={{ alignItems: 'center' }}
>
<Lock />
<FText style={styles.overlayText}>Carte bloqueé</FText>
</TouchableOpacity>
</View>
)}
</ImageBackground>
</View>
And her is my Style page: "i prefered to separate it from my component"
export default StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
imageContainer: {
alignSelf: 'center',
marginTop: hp(3),
},
imageStyle: {
height: hp(25),
width: wp(85),
},
cardWhiteButton: {
marginHorizontal: wp(8),
backgroundColor: 'white',
marginTop: hp(17),
height: hp(5),
width: wp(32),
alignItems: 'center',
justifyContent: 'center',
borderRadius: wp(5),
},
whiteButtonText: {
fontSize: hp(1.4),
color: 'white',
fontFamily: 'Roboto',
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.89)',
justifyContent: 'center',
alignItems: 'center',
borderRadius: wp(3),
},
overlayText: {
color: 'white',
fontSize: hp(1.6),
fontFamily: 'Roboto',
marginTop: hp(2),
},
});