We Keep Coding

Absolute positioning causes React Native component to go off screen

One of my React Native screens needs to have a TouchableOpacity at the bottom of the screen. I've tried setting position: "absolute" and bottom: 0, however, this just causes the element to be a few hundred pixels below the screen. How can I make my TouchableOpacity be at the bottom of the screen all the time?
<View style={styles.mainView}>
<View style={{ position: "relative" }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
}
/>
</View>
//styles
const styles = StyleSheet.create({
mainView: {
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "white",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});

We could handle this without absolute positioning using flex alone.
Add flex:1 to the parent view and to the view that wraps the sticky bottom. Then, add flex: 2 to the view that wraps the other content.
Here is a minimal generic component that lets you add a sticky bottom component.
const MainScreen = ({bottom, children}) => {
return <View style={{flex: 1, backgroundColor: 'red'}}>
<View style={{flex: 2, backgroundColor: 'green'}}>
{children}
</View>
<View style={{flex: 1, backgroundColor: 'yellow'}}>
{bottom}
</View>
</View>
}
export default function App() {
return <MainScreen bottom={
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>}>
</MainScreen>
}
The result looks as follows:
However, we can use absolute positioning as well. You are just missing the flex: 1 for the parent view.
export default function App() {
return <View style={styles.mainView}>
<View style={{ position: "absolute", bottom: 0 }}>
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</TouchableOpacity>
</View>
</View>
}
const styles = StyleSheet.create({
mainView: {
flex: 1,
// devDims are the device dimensions
minHeight: devDims.height,
minWidth: devDims.width,
backgroundColor: "red",
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
},
cartView: {
justifyContent: "center",
alignItems: "center",
maxHeight: 50,
minWidth: "100%",
backgroundColor: "yellow",
alignSelf: "center",
marginTop: 50,
padding: 10,
borderRadius: 20,
},
cartText: {
fontFamily: "semi",
fontSize: 22,
},
});
The result is as follows:

if you are using position as absolute then your view must be last view before last closed view tag
When you have declared any view at bottom of the screen then you should be do like this
import {View, SafeAreaView} from 'react-native';
<SafeAreaView style={{flex:1}}>
<View style={{flex:1}}>
<!---Anything extra views---!>
<View style={{bottom:0,position:'absolute',start:0,end:0}}> !-- you're bottom view
<TouchableOpacity style={styles.cartView}>
<Text style={styles.cartText}>View cart</Text>
</ViewTouchableOpacity
</View>
</View>
</SafeAreaView >

How to set Json array from flatlist in react native

I am new in react native . i am get data from asynstorage. how to set that data from flatlist. my problem is can not set value properly in flatlist data. herewith below attached the JSon value and my code. am try to long time but no idea for that please help me. please
I get data to asystorage value Json Data
{
"users":[
{
"title":"Opna Women's Short Sleeve Moisture",
"image":"https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg",
"id":19
},
{
"title":"DANVOUY Womens T Shirt Casual Cotton Short",
"image":"https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg",
"id":20
}
]
}
Main code.
import React, { useState } from 'react';
import { SafeAreaView, StyleSheet, View, Text, Image, Alert, TouchableOpacity } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/MaterialIcons';
import COLORS from '../../consts/colors';
import foods from '../../consts/foods';
import { PrimaryButton } from '../components/Button';
import AsyncStorage from '#react-native-async-storage/async-storage';
const CartScreen = ({ navigation }) => {
const [value, setvalue] = useState(true);
AsyncStorage.getItem('storeddata')
.then((value) => {
setvalue(value)
console.log("saveddata", value);
}
)
const CartCard = ({ item }) => {
console.log("itemlist", item);
return (
<View style={style.cartCard}>
<Image source={{ uri: item.image }} style={{ height: 80, width: 80 }} />
<View
style={{
height: 100,
marginLeft: 10,
paddingVertical: 20,
flex: 1,
}}>
<Text style={{ fontWeight: 'bold', fontSize: 16 }}>{item.title}</Text>
<Text style={{ fontSize: 13, color: COLORS.grey }}>
{item.title}
</Text>
<Text style={{ fontSize: 17, fontWeight: 'bold' }}>${item.id}</Text>
</View>
<View style={{ marginRight: 20, alignItems: 'center' }}>
<Text style={{ fontWeight: 'bold', fontSize: 18 }}>5</Text>
<View style={style.actionBtn}>
<Icon name="remove" size={25} color={COLORS.white} />
<Icon name="add" size={25} color={COLORS.white} />
</View>
</View>
</View>
);
};
return (
<SafeAreaView style={{ backgroundColor: COLORS.white, flex: 1 }}>
<View style={style.header}>
<Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Cart</Text>
</View>
<FlatList
showsVerticalScrollIndicator={false}
contentContainerStyle={{ paddingBottom: 80 }}
data={value}
renderItem={({ item }) => <CartCard item={item} />}
ListFooterComponentStyle={{ paddingHorizontal: 20, marginTop: 20 }}
ListFooterComponent={() => (
<View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: 15,
}}>
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
Total Price
</Text>
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>$50</Text>
</View>
<View style={{ marginHorizontal: 30 }}>
<PrimaryButton title="CHECKOUT" onPress={() => navigation.navigate('Checkout')} />
</View>
</View>
)}
/>
</SafeAreaView>
);
};
const style = StyleSheet.create({
header: {
paddingVertical: 20,
flexDirection: 'row',
alignItems: 'center',
marginHorizontal: 20,
},
cartCard: {
height: 100,
elevation: 15,
borderRadius: 10,
backgroundColor: COLORS.white,
marginVertical: 10,
marginHorizontal: 20,
paddingHorizontal: 10,
flexDirection: 'row',
alignItems: 'center',
},
actionBtn: {
width: 80,
height: 30,
backgroundColor: COLORS.primary,
borderRadius: 30,
paddingHorizontal: 5,
flexDirection: 'row',
justifyContent: 'center',
alignContent: 'center',
},
});
export default CartScreen;

Flatlist data props take an array as an input Official doc
you are getting an object from local storage you have to pass an array to it
local storage save string value so you have to do JSON.stringify() it when you store data in it and JSON.parse() it when getting data from local storage
local storage link

If your value have that above JSON data stored then try to pass prop like:
<FlatList
...
data={value.users}
...
/>
Hope this works for you.

horizontal ScrollView is not scrolling

When adding horizontal={true} to my scrollview, I thought that would be enough to be able to scroll sideways. For some reason, even though there is enough content to scroll to, the images will not scroll continuously. If you copy and paste this code into snack.expo.io you will see what I mean.
I am not sure what is causing this issue, as I know the normal scrollview vertically works fine and scrolls like normal. I have also tried using nestedScrollenabled to true
Any insight at all is appreciated more than you know!
import React, { useState } from 'react';
import {Pressable, StyleSheet, Text, View, useWindowDimensions, Dimensions, Image, Animated, PanResponder,
TouchableOpacity, ScrollView, ImageBackground, Platform} from 'react-native';
import { SearchBar } from 'react-native-elements';
import {
scale,
verticalScale,
moderateScale,
ScaledSheet,
} from 'react-native-size-matters';
import { MaterialCommunityIcons } from '#expo/vector-icons';
const Images = [
{ id: '1', uri: require('./assets/snack-icon.png'), text: 'Test' },
{ id: '2', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '3', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
{ id: '4', uri: require('./assets/snack-icon.png') /*text: "Test"*/ },
]
const pressableTest = () => {
let textlog = '';
const [state, setState] = useState(0);
};
export default class Home extends React.Component {
renderImagesHorizontal = () => {
return Images.map((item, i) => {
return (
<View
style={{
width : '150%',
paddingLeft: scale(10),
paddingRight: scale(10),
paddingBottom: scale(15),
}}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{
width: '100%',
height: scale(225),
shadowColor: '#000',
shadowOffset: { width: 1, height: 4 },
shadowOpacity: 1,
}}
imageStyle={{ borderRadius: 10 }}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
renderImagesVertical = () => {
return Images.map((item, i) => {
return (
<View style={{ paddingLeft: scale(10), paddingRight: scale(10), paddingBottom: scale(20) }}>
<TouchableOpacity
onPress={() => this.props.navigation.navigate('VenueDetails')}>
<ImageBackground
source={item.uri}
style={{ width:'100%', height: scale(125),
shadowColor: '#000',
shadowOffset: {width: 1, height: 7},
shadowOpacity: 1,}} imageStyle = {{ borderRadius: 20}}>
<View
style={{
position: 'absolute',
bottom: 10,
left: 10,
justifyContent: 'flex-start',
alignItems: 'flex-start',
}}>
<Text style={styles.name}>Name</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<Text style={styles.category}>Category</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.money}>$$</Text>
<Text style={styles.dot}>⬤</Text>
<Text style={styles.starRating}>★★★</Text>
</View>
</View>
</ImageBackground>
</TouchableOpacity>
</View>
);
});
};
state = {
search: '',
};
updateSearch = (search) => {
this.setState({ search });
};
render() {
const { search } = this.state;
return (
<ScrollView style={{ flex: 1, backgroundColor: '#272933', horizontal: 'true' }}>
<View style={{flexDirection:'row', marginTop: scale(20)}}>
{/*this will proabbly say somethign different and probably have a different look to it but you get the idea
I was also trying to add a shadow to this but couldnt figure it out. */}
<Text style={{marginTop: scale(30) ,fontSize: scale(40), fontWeight: 'bold', color: '#FFFFFF', paddingLeft: scale(20)}}>
Home
</Text>
<View style={{paddingTop: scale(40), paddingLeft: scale(155)}}>
</View>
</View>
<SearchBar
placeholder="Search..."
onChangeText={this.updateSearch}
value={search}
round='true'
containerStyle={{backgroundColor: '#272933', borderBottomColor: 'transparent', borderTopColor: 'transparent',
paddingLeft: scale(20) , paddingRight: scale(20)}}
inputContainerStyle={{height: scale(30), width: scale(310), backgroundColor: '#3A3B3C'}}
searchIcon={() => <MaterialCommunityIcons name="glass-mug-variant" size={25} color='#87909A'/>}
clearIcon= 'null'
/>
<ScrollView
horizontal={true}
>
<View style={{ flex: 1, flexDirection : 'row', marginTop: 15 }}>{this.renderImagesHorizontal()}</View>
</ScrollView>
<View style={{ flex: 1, marginTop: 15 }}>{this.renderImagesVertical()}</View>
</ScrollView>
);
}
}
const styles = ScaledSheet.create({
starRating: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
category: {
color: 'white',
fontSize: '20#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
name: {
fontWeight: 'bold',
color: 'white',
fontSize: '25#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
dot: {
color: 'white',
fontSize: '5#s',
paddingLeft: '5#s',
paddingRight: '5#s',
textShadowOffset: { width: 2, height: 2 },
textShadowRadius: 2,
textShadowColor: '#000',
},
money: {
color: 'white',
fontSize: '20#s',
},
});

in android you must add nestedScrollEnabled={true} to Enables nested scrolling for Android API level 21+. see here
<ScrollView>
<ScrollView nestedScrollEnabled={true}>
</ScrollView>
</ScrollView>
try snack here (test in android & ios not web)

React-Navigation: aligning header to center

I am having trouble aligning my custom header to the middle of the header in a Stack Navigation.
This is my current view:
I would like to have the menu icon to the left and the title centered.
My current code for the screenOptions in the StackNavigator are
headerStyle: {
backgroundColor: "#a5ade8",
height: 80
},
headerTintColor: "#383f42",
headerTitleStyle: {
fontFamily: "heebo-black",
fontSize: 24
}
My code in my custom header is:
return (
<View style={styles.container}>
<MaterialIcons
name="menu"
style={styles.icon}
size={24}
onPress={openDrawer}
/>
<View>
<Text style={styles.headerTitle}>{title}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex:1,
height: "100%",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
},
headerTitle: {
fontFamily: "heebo-black",
fontSize: 24,
color: "#383f42",
letterSpacing: 1,
},
icon: {
position: "absolute",
left: 16
}
});
I have set my width to 100% in my header, however it takes only takes the space of the text...
Any help would be greatly appreciated!

Have you tried to use the headerTitleAlign option in screenOptions?
const HomeStackNavigator = () => {
return (
<Stack.Navigator
initialRouteName="Reviews"
screenOptions={{
headerTitleAlign: "center"
}}
>
<Stack.Screen
name="Reviews"
component={Home}
options={{
headerTitle: () => (
<View style={styles.container}>
<View>
<Text style={styles.headerTitle}>Reviews App</Text>
</View>
</View>
),
headerLeft: () => (
<MaterialIcons name="menu" size={35} style={styles.icon} />
)
}}
/>
</Stack.Navigator>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
height: "100%",
flexDirection: "row",
alignItems: "center"
},
headerTitle: {
fontSize: 24,
color: "#383f42",
letterSpacing: 1
},
icon: {
marginLeft: 10
}
});

try
textAlign:'center'
at the header title styles

Can you see the example here in this expo-snack , there in place of icon ive used text and your header is aligned center.
Hope it helps. feel free for doubts

How can I horizontally wrap a list of dynamic tags in a ScrollView?

I've created a list of tags in React Native, but I can't seem to make them wrap across multiple rows — here's what I have so far:
I want the tags to expand depending on the text - for example, the last tag in the screenshot should say Another tag - and wrap to a new line when needed.
I've rendered the tags using a ScrollView component, as I understand FlatList doesn't support wrapping - here's that code:
<ScrollView
contentContainerStyle={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}
style={styles.tagContainer}>
{selectedTags
? selectedTags.map(tag => (
<Tag
style={{backgroundColor: tag.color}}
label={tag.label}
isList={false}
/>
))
: null}
</ScrollView>
styles: {
tagContainer: {
width: SCREEN_WIDTH - 20,
minHeight: 75,
},
}
Each tag is rendered using a Tag component that looks like this:
const Tag = ({label, style, isList, isChecked}) => {
const renderIcon = () => {
if (isList === true) {
return (
<Icon
name="ios-checkmark"
color={isChecked ? 'black' : 'white'}
size={36}
style={{alignSelf: 'center', margin: 5}}
/>
);
}
};
return (
<View
style={{
flex: 1,
flexDirection: 'row',
}}>
{renderIcon()}
<View style={isList ? styles.listContainer : styles.tagContainer}>
<Text style={[styles.tagStyle, style]}>{label}</Text>
</View>
</View>
);
};
const styles = {
tagContainer: {margin: 2, height: 30, flex: 1},
listContainer: {
flex: 1,
flexDirection: 'column',
width: 375,
height: 50,
borderBottomColor: '#dadade',
borderBottomWidth: 0.5,
justifyContent: 'center',
},
tagStyle: {
borderRadius: 4,
padding: 5,
marginLeft: 10,
flexDirection: 'row',
alignSelf: 'flex-start',
},
};
export {Tag};
Thanks!

Try below
<View style={{ flexDirection: 'row', flexWrap: 'wrap', flex: 1, alignItems: 'flex-start' }}>
{selectedTags
? selectedTags.map(tag => (
<Tag
style={{backgroundColor: tag.color}}
label={tag.label}
isList={false}
/>
))
: null}
</View>