Flatlist scroll doesn't work on android emulator - javascript

Im trying to create a horizontal flatlist. The code below does work in online editor but not on my emulator. I couldn't figure out if the problem is due to my code or the emulator. I tried remove horizontal property but still it doesn't work vertically. I replaced SafeAreaView with ScrollView but I took same result. Control the styles and removed all styles and tested without styles but again I couldn't scroll it.
export const Stories = () => {
const stories = [
{
id: 1,
name: "Name1",
image: "https://xsgames.co/randomusers/avatar.php?g=male",
},
{
id: 2,
name: "Name2",
image: "https://xsgames.co/randomusers/avatar.php?g=female",
},
{
id: 3,
name: "Name3",
image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
},
{
id: 4,
name: "Name4",
image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
},
{
id: 5,
name: "Name5",
image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
},
{
id: 6,
name: "Name6",
image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
},
{
id: 7,
name: "Name7",
image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
},
{
id: 8,
name: "Name8",
image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
},
{
id: 9,
name: "Name9",
image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
},
];
const singleStory = ({ item }) => {
return (
<View style={styles.story}>
<View style={styles.avatarContainer}>
<Image source={{ uri: item.image }} style={styles.avatar} />
</View>
<Text>{item.name}</Text>
</View>
);
};
return (
<SafeAreaView style={styles.container}>
<FlatList
horizontal
data={stories}
renderItem={singleStory}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
borderColor: "grey",
borderBottomWidth: 0.9,
borderTopWidth: 0.9,
},
story: {
padding: 10,
alignItems: "center",
},
avatarContainer: {
height: 60,
width: 63,
justifyContent: "center",
alignItems: "center",
},
avatar: {
borderRadius: 50,
height: 50,
width: 50,
},
});

Add flex:1 in container, as you need to fix dimension of the view
container: {
borderColor: "grey",
borderBottomWidth: 0.9,
borderTopWidth: 0.9,
flex:1
},

Related

How to align Text in React Native

I'm trying to style my work, I've included a slug description now and simply hardcoded it in whilst I try to make it look better. I'm having two problems that I'm looking to resolve. I can't get the slug text to align between one another. And the second issue is that when it is took long it wraps and distorts everything, I'd rather it reduced down and showed an ellipsis (...) are these things achieveable?
import { StyleSheet, Text, View, FlatList, SafeAreaView, Image } from 'react-native'
export default function App() {
const present = [{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('../assets/present.jpeg')
},
{
id:2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('../assets/present2.jpeg')
},
{
id:3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('../assets/present3.jpeg')
},
{
id:4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('../assets/present4.jpeg')
},
{
id:5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('../assets/present5.jpeg')
},
];
const onePresent = ( { item } ) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source = {item.image} style={styles.avatarContainer}/>
</View>
<Text style={styles.name}> {item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
)
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>
}
const itemSeperator = () => {
return <View style = {styles.seperator}/>
}
return (
<SafeAreaView >
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data = { present }
renderItem = { onePresent }
ItemSeperatorComponent = { itemSeperator }
ListEmptyComponent = { <Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug:{
transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name:{
transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline:{
color:'#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex:1,
flexDirection:'row',
alignItems:'center',
paddingVertical:13,
},
avatarContainer:{
backgroundColor:'#D9D9D9',
borderRadius:100,
height:89,
width:89,
justifyContent:'center',
alignItems: 'center',
margin:10,
},
listHeader:{
height:55,
alignItems:'center',
justifyContent: 'center'
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
}
})
The textAlign prop is what I think you want. However I noticed you were using transform to position the text in your view and I found a way to layout your components so that you dont have to do so (demo).
import {
StyleSheet,
Text,
View,
FlatList,
SafeAreaView,
Image,
} from 'react-native';
export default function App() {
const present = [
{
id: 1,
name: 'PresentOne',
slug: 'PresentOne Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 2,
name: 'PresentTwo',
slug: 'PresentTwo Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 3,
name: 'PresentThree',
slug: 'PresentThree Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 4,
name: 'PresentFour',
slug: 'PresentFour Slug',
image: require('./assets/snack-icon.png'),
},
{
id: 5,
name: 'PresentFive',
slug: 'PresentFive Slug',
image: require('./assets/snack-icon.png'),
},
];
const onePresent = ({ item }) => (
<View style={styles.item}>
<View style={styles.avatarContainer}>
<Image source={item.image} style={styles.avatarContainer} />
</View>
<View style={styles.slug}>
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.slug}>{item.slug}</Text>
</View>
</View>
);
const headerComponent = () => {
return <Text style={styles.listHeadline}>Presents</Text>;
};
const itemSeperator = () => {
return <View style={styles.seperator} />;
};
return (
<SafeAreaView>
<FlatList
ListHeaderComponentStyle={styles.listHeader}
ListHeaderComponent={headerComponent}
data={present}
renderItem={onePresent}
ItemSeperatorComponent={itemSeperator}
ListEmptyComponent={<Text>Empty</Text>}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
slug: {
// transform: [{translateX: -100}],
// alignContent: 'center',
flexDirection: 'column',
alignItems: 'center',
},
name: {
// transform: [{translateY: -30},{translateX: 10}],
fontSize: 20,
},
listHeadline: {
width: '100%',
color: '#333',
fontSize: 21,
fontWeight: 'bold',
},
item: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 13,
},
avatarContainer: {
backgroundColor: '#D9D9D9',
borderRadius: 100,
height: 89,
width: 89,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
},
listHeader: {
height: 55,
alignItems: 'center',
justifyContent: 'center',
},
seperator: {
height: 1,
width: '100%',
backgroundColor: '#CCC',
},
});

Notification Screen- There are three different text in one line (Two Text near to each other and the third text to be float on right) in react native

Notification Screen- There are three different text in one line (Two Text near to each other and the third text to be float on right) in react native.
I am trying to float the text on right in the same line and align all right. What it can be. there is no option of floating text in react-native.
import React from "react";
import { StyleSheet, Text, View, FlatList, Image } from "react-native";
import Header from "../components/Header";
export default function Notifications() {
const data = [
{
id: "1",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Bilal Majeed",
category: "Management",
notification: "Liked your post",
time: "Now",
},
{
id: "2",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Amna Yasir",
category: "Special Volunteer",
notification: "shared your post ",
time: "Now",
},
{
id: "3",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Amna Yasir",
category: "Special Volunteer",
notification: "commented on your post",
time: "5 min ago",
},
{
id: "4",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Abbas S.",
category: "Management",
notification: "is now following you",
time: "15 min ago",
},
{
id: "5",
post_title: "Best practice",
avatar: "../assets/avatar-placeholder.png",
username: "Abbas S.",
category: "Management",
notification: "like your post",
time: "35 min ago",
},
];
return (
<View>
<View style={styles.container}>
<Header title={"Notifications"} />
</View>
<FlatList
data={data}
keyExtractor={(item, index) => {
return index.toString();
}}
renderItem={({ item }) => {
return (
<View style={styles.mainBody}>
<View style={styles.singleNotification}>
<Image
style={styles.avatar}
source={require("../assets/avatar-placeholder.png")}
/>
<View style={styles.mainContent}>
<View style={styles.notificationHead}>
<Text style={styles.userName}>{item.username}</Text>
<Text style={styles.categoryText}>{item.category}</Text>
<Text style={styles.timeText}>{item.time}</Text>
</View>
<View>
<Text style={styles.notification}>{item.notification}</Text>
</View>
</View>
</View>
<View style={styles.hairLine} />
</View>
);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
},
mainBody: {
alignContent: "center",
alignItems: "center",
},
singleNotification: {
paddingHorizontal: 9,
flexDirection: "row",
alignItems: "center",
width: 330,
height: 62,
backgroundColor: "#fff",
marginTop: 10,
},
avatar: {
width: 35,
height: 35,
borderRadius: 35 / 2,
},
notificationHead: {
flexDirection: "row",
alignItems: "baseline",
backgroundColor: "#eee",
},
userName: {
fontFamily: "Roboto",
fontSize: 14,
fontWeight: "700",
color: "#707070",
marginLeft: 11,
lineHeight: 18,
},
categoryText: {
fontFamily: "Roboto",
fontSize: 11,
fontWeight: "400",
color: "#4582C3",
marginLeft: 11,
},
timeText: {
position: "relative",
right: 0,
fontFamily: "Roboto",
fontSize: 11,
fontWeight: "400",
color: "#707070",
opacity: 0.7,
marginLeft: 11,
textAlign: "left",
},
notification: {
fontFamily: "Roboto",
fontSize: 12,
fontWeight: "400",
color: "#707070",
marginLeft: 11,
lineHeight: 18,
},
hairLine: {
alignContent: "center",
padding: 0,
marginTop: 15,
width: "100%",
height: 2,
opacity: 0.5,
backgroundColor: "#eee",
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
/*
[UI design ss][1]
[1]: https://i.stack.imgur.com/eM5Lk.png */
you can float something using position: "absolute", zindex: 1 and then align it left or right using top: 0, right:0
so your code should look something like this for floating text on right top
floatingComp: {
position: 'absolute',
zindex: 1,
top: 0,
right: 0,
},

Change Styling (background color) when buttons are tapped in React Native

I want to set the background color of the round/oval TouchableOpacity buttons beneath the headings to blue when they are tapped by the user, and no background color when they are not tapped. I have heard that this can be achieved by managing the states of the component itself.
Here is my code for reference:
import React, {useState} from 'react';
import {
StyleSheet,
Text,
View,
Button,
FlatList,
Dimensions,
TouchableOpacity,
Image,
} from 'react-native';
import Modal from 'react-native-modal';
const {width: screenWidth} = Dimensions.get('screen');
// screen width Multiply by 0.8
const Footer = () => {
return (
<View>
<Text style={{color: '#fff', fontSize: 20}}>Reviews</Text>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 20}}>
<Image
source={require('../assets/five-stars.png')}
style={{width: 90, height: 18}}
/>
<Text style={{marginLeft: 10}}>& Up</Text>
</View>
<View style={{flexDirection: 'row', marginTop: 30}}>
<TouchableOpacity
style={{
backgroundColor: '#525252',
width: 200,
paddingTop: 20,
paddingBottom: 20,
alignItems: 'center',
borderTopLeftRadius: 22,
}}>
<Text>Reset</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
backgroundColor: '#00ACED',
width: 200,
alignItems: 'center',
paddingTop: 20,
paddingBottom: 20,
borderTopRightRadius: 23,
}}>
<Text>Apply</Text>
</TouchableOpacity>
</View>
</View>
);
};
const renderItem = ({item: {title, data, key}}) => (
<View>
<Text style={styles.headingText}>{title}</Text>
<View style={styles.item}>
{data.map(el => (
<TouchableOpacity
key={el.key}
style={[
{
backgroundColor: el.isCheck ? '#00ACED' : 'transparent',
padding: 20,
borderColor: '#185268',
borderWidth: 2,
borderRadius: 40,
marginBottom: 10,
marginRight: 10,
},
]}>
<Text style={styles.btnText}>{el.name}</Text>
</TouchableOpacity>
))}
</View>
</View>
);
const SandboxScreen = () => {
const [isModalVisible, setModalVisible] = useState(false);
const [data, setData] = useState([
{
key: 'id-1',
title: 'Workshop Category',
data: [
{name: 'BodyShops', isCheck: false, key: 'id-5'},
{name: 'Electric Cars', isCheck: true, key: 'id-6'},
{name: 'Performance Shops', isCheck: false, key: 'id-7'},
],
},
{
key: 'id-2',
title: 'Vehicle Category',
data: [
{name: 'Cars', isCheck: false, key: 'id-8'},
{name: 'Trucks', isCheck: true, key: 'id-9'},
{name: 'Motorbikes', isCheck: false, key: 'id-10'},
],
},
{
key: 'id-3',
title: 'Services',
data: [
{name: 'Accident Repair', isCheck: false, key: 'id-11'},
{name: 'AC System Diagnosis', isCheck: false, key: 'id-12'},
{name: 'Car Polishing / Detailing', isCheck: false, key: 'id-13'},
{name: 'Electric / Hybrid System Repair', isCheck: true, key: 'id-14'},
{name: 'General Mechanical Work', isCheck: true, key: 'id-15'},
],
},
{
key: 'id-4',
title: 'Brands',
data: [
{name: 'FORD', isCheck: false, key: 'id-16'},
{name: 'BMW', isCheck: false, key: 'id-17'},
{name: 'BMW', isCheck: false, key: 'id-18'},
{name: 'AUDI', isCheck: false, key: 'id-19'},
{name: 'JAGUAR', isCheck: false, key: 'id-20'},
{name: 'FERRARI', isCheck: true, key: 'id-21'},
{name: 'LAMBORGHINI', isCheck: false, key: 'id-22'},
],
},
]);
const toggleModal = () => {
setModalVisible(prevState => !prevState);
};
return (
<View
style={[
{
flex: 1,
backgroundColor: '#252525',
},
]}>
<View style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={item => item.key}
ListFooterComponent={Footer}
/>
</View>
{/* <Button title="Show modal" onPress={toggleModal} />
<Modal
isVisible={isModalVisible}
animationIn="slideInRight"
animationOut="slideOutRight"
animationInTiming={500}
animationOutTiming={500}
hasBackdrop={true}
backdropColor="#252525"
backdropOpacity={0.8}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={500}
onBackdropPress={() => setModalVisible(false)}
style={{alignItems: 'flex-end', margin: 0}}>
<View
style={{
backgroundColor: 'white',
flex: 1,
paddingTop: 50,
width: screenWidth * 0.7,
}}>
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
</View>
</Modal> */}
</View>
);
};
export default SandboxScreen;
const styles = StyleSheet.create({
container: {},
button: {
backgroundColor: 'green',
padding: 13,
},
headingText: {
color: '#fff',
fontSize: 20,
marginBottom: 20,
},
item: {
flexDirection: 'row',
flexWrap: 'wrap',
marginBottom: 40,
},
});
Please anyone guide me on how this can be achieve by providing code example related to my above code.
Here is your original solution: Snack
import React, { useState, useEffect } from 'react';
import {
StyleSheet,
Text,
View,
Button,
FlatList,
Dimensions,
TouchableOpacity,
SectionList,
Image,
} from 'react-native';
// import Modal from 'react-native-modal';
const { width: screenWidth } = Dimensions.get('screen');
// screen width Multiply by 0.8
const SandboxScreen = () => {
const [isModalVisible, setModalVisible] = useState(false);
const [data, setData] = useState([
{
key: 'id-1',
title: 'Workshop Category',
data: [
{ name: 'BodyShops', isCheck: false, key: 'id-5' },
{ name: 'Electric Cars', isCheck: true, key: 'id-6' },
{ name: 'Performance Shops', isCheck: false, key: 'id-7' },
],
},
{
key: 'id-2',
title: 'Vehicle Category',
data: [
{ name: 'Cars', isCheck: false, key: 'id-8' },
{ name: 'Trucks', isCheck: true, key: 'id-9' },
{ name: 'Motorbikes', isCheck: false, key: 'id-10' },
],
},
{
key: 'id-3',
title: 'Services',
data: [
{ name: 'Accident Repair', isCheck: false, key: 'id-11' },
{ name: 'AC System Diagnosis', isCheck: false, key: 'id-12' },
{ name: 'Car Polishing / Detailing', isCheck: false, key: 'id-13' },
{
name: 'Electric / Hybrid System Repair',
isCheck: true,
key: 'id-14',
},
{ name: 'General Mechanical Work', isCheck: true, key: 'id-15' },
],
},
{
key: 'id-4',
title: 'Brands',
data: [
{ name: 'FORD', isCheck: false, key: 'id-16' },
{ name: 'BMW', isCheck: false, key: 'id-17' },
{ name: 'BMW', isCheck: false, key: 'id-18' },
{ name: 'AUDI', isCheck: false, key: 'id-19' },
{ name: 'JAGUAR', isCheck: false, key: 'id-20' },
{ name: 'FERRARI', isCheck: true, key: 'id-21' },
{ name: 'LAMBORGHINI', isCheck: false, key: 'id-22' },
],
},
]);
const Footer = () => {
return (
<View>
<Text style={{ color: '#fff', fontSize: 20 }}>Reviews</Text>
<View
style={{ flexDirection: 'row', alignItems: 'center', marginTop: 20 }}>
<Text style={{ marginLeft: 10 }}>& Up</Text>
</View>
<View style={{ flexDirection: 'row', marginTop: 30 }}>
<TouchableOpacity
onPress={() => {
setData((prev) => {
//Here I have update your all isCheck prop to false;
let dat = prev.map((item, index) =>
item.data.map((v) => (v.isCheck = false))
);
return [...prev];
});
}}
style={{
backgroundColor: '#525252',
width: 200,
paddingTop: 20,
paddingBottom: 20,
alignItems: 'center',
borderTopLeftRadius: 22,
}}>
<Text>Reset</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
//You can call an API to store your results or directly save the results in your Storage.
alert('Results has been applied!');
}}
style={{
backgroundColor: '#00ACED',
width: 200,
alignItems: 'center',
paddingTop: 20,
paddingBottom: 20,
borderTopRightRadius: 23,
}}>
<Text>Apply</Text>
</TouchableOpacity>
</View>
</View>
);
};
const renderItem = ({ item: { title, data, key }, index }) => (
<View>
<Text style={styles.headingText}>{title}</Text>
<View style={styles.item}>
{data.map((el) => (
<TouchableOpacity
onPress={() => {
setData((prev) => {
el.isCheck = !el.isCheck; // `!` means if a value is true then make it false else make it true;
let dat = [el, ...prev[index].data];
// Here I'm spreading the both objects and merging the data;
return [...prev];
// Retruned the updated values by spreading it.
});
}}
key={el.key}
style={[
{
backgroundColor: el.isCheck ? '#00ACED' : 'transparent',
padding: 20,
borderColor: '#185268',
borderWidth: 2,
borderRadius: 40,
marginBottom: 10,
marginRight: 10,
},
]}>
<Text style={styles.btnText}>{el.name}</Text>
</TouchableOpacity>
))}
</View>
</View>
);
const toggleModal = () => {
setModalVisible((prevState) => !prevState);
};
return (
<View
style={[
{
flex: 1,
backgroundColor: '#252525',
},
]}>
<View style={styles.container}>
<FlatList
data={data}
renderItem={renderItem}
keyExtractor={(item) => item.key}
ListFooterComponent={Footer}
/>
</View>
{/* <Button title="Show modal" onPress={toggleModal} />
<Modal
isVisible={isModalVisible}
animationIn="slideInRight"
animationOut="slideOutRight"
animationInTiming={500}
animationOutTiming={500}
hasBackdrop={true}
backdropColor="#252525"
backdropOpacity={0.8}
backdropTransitionInTiming={500}
backdropTransitionOutTiming={500}
onBackdropPress={() => setModalVisible(false)}
style={{alignItems: 'flex-end', margin: 0}}>
<View
style={{
backgroundColor: 'white',
flex: 1,
paddingTop: 50,
width: screenWidth * 0.7,
}}>
<View style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
</View>
</Modal> */}
</View>
);
};
export default SandboxScreen;
const styles = StyleSheet.create({
container: {},
button: {
backgroundColor: 'green',
padding: 13,
},
headingText: {
color: '#fff',
fontSize: 20,
marginBottom: 20,
},
item: {
display: 'flex',
flexDirection: 'row',
marginBottom: 40,
},
});

How to create an array of text that includes title and description for images?

I added some pictures in my app that are called from an array. Now I need another array to have text which includes a title and some description for these images.
How can I create this array of text that when an image is clicked, the specific title and description would be shown for that image?
This is the code where pictures are displayed on the Home Screen of the app.
import { StatusBar } from "expo-status-bar";
import Icon from "react-native-vector-icons/FontAwesome";
import {
StyleSheet,
Text,
View,
Image,
FlatList,
Dimensions,
TouchableOpacity,
} from "react-native";
import Header from '../components/Header';
var loadImageCount = 6;
export default class PicFlatlist extends Component {
constructor(props){
super(props);
this.state = {
loadImageCount: 6,
images: [
{ url: require("../assets/pic_1.jpg"), id: 1 },
{ url: require("../assets/pic_2.jpg"), id: 2 },
{ url: require("../assets/pic_3.jpg"), id: 3 },
{ url: require("../assets/pic_4.jpg"), id: 4 },
{ url: require("../assets/pic_5.jpg"), id: 5 },
{ url: require("../assets/pic_6.jpg"), id: 6 },
{ url: require("../assets/pic_7.jpg"), id: 7 },
{ url: require("../assets/pic_8.jpg"), id: 8 },
{ url: require("../assets/pic_9.jpg"), id: 9 },
{ url: require("../assets/pic_10.jpg"), id: 10 },
{ url: require("../assets/pic_11.jpg"), id: 11 },
{ url: require("../assets/pic_12.jpg"), id: 12 },
{ url: require("../assets/pic_13.jpg"), id: 13 },
{ url: require("../assets/pic_14.jpg"), id: 14 },
{ url: require("../assets/pic_15.jpg"), id: 15 },
{ url: require("../assets/pic_16.jpg"), id: 16 },
{ url: require("../assets/pic_17.jpg"), id: 17 },
{ url: require("../assets/pic_18.jpg"), id: 18 },
{ url: require("../assets/pic_19.jpg"), id: 19 },
{ url: require("../assets/pic_20.jpg"), id: 20 },
{ url: require("../assets/pic_21.jpg"), id: 21 },
{ url: require("../assets/pic_22.jpg"), id: 22 },
{ url: require("../assets/pic_23.jpg"), id: 23 },
{ url: require("../assets/pic_24.jpg"), id: 24 },
{ url: require("../assets/pic_25.jpg"), id: 25 },
{ url: require("../assets/pic_26.jpg"), id: 26 },
{ url: require("../assets/pic_27.jpg"), id: 27 },
{ url: require("../assets/pic_28.jpg"), id: 28 },
{ url: require("../assets/pic_29.jpg"), id: 29 },
{ url: require("../assets/pic_30.jpg"), id: 30 },
{ url: require("../assets/pic_31.jpg"), id: 31 },
{ url: require("../assets/pic_32.jpg"), id: 32 },
{ url: require("../assets/pic_33.jpg"), id: 33 },
{ url: require("../assets/pic_34.jpg"), id: 34 },
{ url: require("../assets/pic_35.jpg"), id: 35 },
{ url: require("../assets/pic_36.jpg"), id: 36 },
{ url: require("../assets/pic_37.jpg"), id: 37 },
{ url: require("../assets/pic_38.jpg"), id: 38 },
{ url: require("../assets/pic_39.jpg"), id: 39 },
{ url: require("../assets/pic_40.jpg"), id: 40 },
{ url: require("../assets/pic_41.jpg"), id: 41 },
{ url: require("../assets/pic_42.jpg"), id: 42 },
{ url: require("../assets/pic_43.jpg"), id: 43 },
{ url: require("../assets/pic_44.jpg"), id: 44 },
{ url: require("../assets/pic_45.jpg"), id: 45 },
{ url: require("../assets/pic_46.jpg"), id: 46 },
{ url: require("../assets/pic_47.jpg"), id: 47 },
],
};
}
loadMore = () => {
var ImageCount = this.state.loadImageCount + 12;
this.setState({ loadImageCount: ImageCount });
}
static navigationOptions = () => {
return {
header: (null),
};
}
renderFooter = () => {
if(this.state.loadImageCount < this.state.images.length){
return (
<View style={styles.buttonRow}>
<Icon.Button
name="sort"
backgroundColor="#ffa500"
onPress={() => {this.loadMore()}}
>
<Text style={{ fontSize: 15 }}>View More</Text>
</Icon.Button>
</View>
);
}
else{
return (
null
)
}
}
render(){
return (
<View >
<View style={{width:"100%",height:undefined,paddingTop:StatusBar.currentHeight}}>
<Header />
</View>
<View style={styles.outerContainer}>
<FlatList
data={this.state.images.slice(0, this.state.loadImageCount)}
key={"2"}
numColumns={2}
contentContainerStyle={styles.homescreen}
keyExtractor={(item) => item.id.toString()}
ListFooterComponent={this.renderFooter}
renderItem={({ item }) => (
<TouchableOpacity
activeOpacity={0.8}
onPress={() =>
this.props.navigation.navigate("Image Details", {
SelectedImage: [item],
})
}
>
<Image
source={item.url}
style={{
width: Dimensions.get("window").width * 0.45,
height: Dimensions.get("window").width * 0.55,
borderWidth: 2,
borderColor: "white",
resizeMode: "cover",
marginVertical: Dimensions.get("window").width * 0.02,
marginHorizontal: Dimensions.get("window").width * 0.02,
}}
/>
</TouchableOpacity>
)}
/>
</View>
</View>
);};
}
const styles = StyleSheet.create({
homescreen: {
width: Dimensions.get("window").width,
alignItems: "center",
justifyContent: "center",
height: undefined,
paddingBottom: Dimensions.get("window").height * 0.1,
backgroundColor: 'white'
},
outerContainer: {
position: "relative",
marginTop: Dimensions.get("window").height * 0.05,
},
buttonRow: {
margin: 15,
flexDirection: "row",
alignContent: "center",
alignSelf: "center",
justifyContent: "center",
},
});
This is the code for the page when an image is clicked on:
import React, { Component, useState } from 'react';
import {
StyleSheet,
Text,
View,
Image,
FlatList,
Dimensions
} from 'react-native';
import { NavigationStackProp } from "react-navigation-stack";
import Header from '../components/Header';
import BackHeader from '../components/BackHeader';
var count = 0;
interface Props{
navigation: NavigationStackProp
}
interface State{
images: any
}
export default class ImageDetails extends Component<Props,State> {
constructor(props) {
super(props);
this.state = {
images: this.props.navigation.getParam("SelectedImage")
};
}
render () {
return (
<View>
<View style={{width:"100%",height:undefined}}> //,paddingTop:StatusBar.currentHeight
<BackHeader />
</View>
<FlatList
data={this.state.images}
numColumns={1}
contentContainerStyle={styles.homescreen}
keyExtractor={(item) => item.id.toString()}
renderItem={(item) => this.loadImage(item)}
/>
</View>
);
}
loadImage = (item) => {
return (
<View style={styles.homescreen}>
<Image
source={item.item.url}
style={{
width: Dimensions.get("window").width * 0.99,
height: Dimensions.get("window").height * 0.73,
borderWidth: 2,
borderColor: "white",
resizeMode: "cover",
marginVertical: Dimensions.get("window").width * 0.02,
marginHorizontal: Dimensions.get("window").width * 0.02,
}}
/>
<Text>Miniature Description</Text>
</View>
);
};
}
const styles = StyleSheet.create({
homescreen: {
position: "relative",
width: Dimensions.get("window").width,
alignItems: "center",
alignSelf: 'center',
justifyContent: "center",
},
});
So I find this answer from Expo Community on Discord. For creating an array, you can either create it inside the main file of your project or a better approach is to create an extra file and add your array file in it and then call it inside the main file. For instance, this is an extra file in my code for creating a array.
image1: {
title: "Cool Image # 1",
description: `People setting in a garden`,
},
image2: {
title: "Cool Image # 1",
description: `People setting in a garden`,
},
image3: {
title: "Cool Image # 1",
description: `People setting in a garden`,
},
image4: {
title: "Cool Image # 1",
description: `People setting in a garden`,
},
image5: {
title: "Cool Image # 1",
description: `People setting in a garden`,
},
};
And this is my main file calling the array.
constructor(props) {
super(props);
this.state = {
loadImageCount: 6,
images: [
{
url: require("../assets/pic_1.jpg"),
id: 1,
title: ImageData["image1"].title,
description: ImageData["image1"].description,
},
{
url: require("../assets/pic_2.jpg"),
id: 2,
title: "cool image #2",
description: "Some people sitting in a garden",
},

how to create a radio button section with a data table in react native?

I would like to create a page like this in react native however I don't know how I could implement the radio buttons with data that looks like the following code. an idea of ​​how I could go about itenter image description here
My data looks like this with an option title first then the radio button to choose. To make it simple I would like to create a section with a title and radio buttons that and the data I get them in a table like this one
const products = [
{
id: 1,
title : 'Boisson',
data : [
{
label: 'Coca Cola',
price: '500 KMF',
},
{
label: 'Fanta',
price: '250 KMF',
},
{
label: 'Sprite',
price: '200 KMF',
},
]
},
{
id: 2,
title : 'Boisson',
data : [
{
label: 'Coca Cola',
price: '500 KMF',
},
{
label: 'Fanta',
price: '250 KMF',
},
{
label: 'Sprite',
price: '200 KMF',
},
]
},
];
Thank's for your help
You can use react-native-paper radio button check my example:
import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { RadioButton } from 'react-native-paper';
const products = [
{
id: 1,
title: 'Soft Drinks',
data: [
{
label: 'Coca Cola',
price: '500 KMF',
},
{
label: 'Fanta',
price: '250 KMF',
},
{
label: 'Sprite',
price: '200 KMF',
},
]
},
{
id: 2,
title: 'Juices',
data: [
{
label: 'Mango',
price: '500 KMF',
},
{
label: 'Orange',
price: '250 KMF',
},
{
label: 'Strawberry',
price: '200 KMF',
},
]
},
];
export default class DrinkSelector extends Component {
checkDrink(drink, object) {
var i;
for (i = 0; i < object.length; i++) {
if (object[i].isChecked === 'checked') {
object[i].isChecked = 'unchecked';
}
}
drink.isChecked = "checked";
this.setState({ refresh: true });
}
render() {
return (
<View style={{ flex: 1, padding: 20, backgroundColor: "#f2f2f2" }}>
{products.map((object, d) =>
<View key={d} style={{ justifyContent: 'space-between' }}>
<Text style={{ fontSize: 18, marginBottom: 20 }}>{object.title}</Text>
{object.data.map((drink, i) =>
<View key={i} style={styles.drinkCard}>
<RadioButton value={drink.price} status={drink.isChecked} onPress={() => this.checkDrink(drink, object.data)} />
<Text style={{ fontSize: 20, paddingLeft: 10 }}>{drink.label}</Text>
</View>
)}
</View>
)}
</View>
)
}
}
const styles = StyleSheet.create({
drinkCard: {
paddingLeft: 6,
alignItems: 'center',
flexDirection: 'row',
marginBottom: 16,
backgroundColor: 'white',
height: 55,
elevation: 1,
borderRadius: 4,
}
})

Categories