I got array:
const DATA_Section = [
{
id: 0,
text: "Some text1",
},
{
id: 1,
text: "Some text2",
},
{
id: 2,
text: "Some text 3",
},
];
and I want to use text from this array to create dynamic component. Idea is: I can see text[0], I click some button then I can see text[1], something like loop. How can to do it?
You can do this way maybe.
const DATA_Section = [
{
id: 0,
text: "Some text1",
},
{
id: 1,
text: "Some text2",
},
{
id: 2,
text: "Some text 3",
},
];
const Component: FC = () => {
const [initialRenderState, setInitialRenderState] =
useState(DATA_Section[0])
return (
<View>
{intialRenderState.map(item => <Text key={item.id}>{item.text}</Text>)}
<Pressable onPress={()=> setInitialRenderState(prevState => [...prevState, Data_Section[prevState.length]])}>
<Text>Add item</Text>
<Pressable>
</View>
)
}
const DATA_Section = [
{
id: 0,
text: "Some text1",
},
{
id: 1,
text: "Some text2",
},
{
id: 2,
text: "Some text 3",
},
];
const sample = () => {
const [ index, setIndex ] = useState(0);
const handleChangeIndex = () => {
if (index < DATA_Section.length) {
setIndex(index + 1);
}else{
setIndex(0);
}
}
return(
<View style={{flex:1}}>
<TouchableWithoutFeedback onPress={()=>handleChangeIndex()}>
<View style={{width:100, height:50, backgroundColor:'red'}}>
<Text>
{DATA_Section[index].text}
</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
Related
I have seen a lot of answers for FlatList not scrolling for React Native, but none of the answers seem to work.
The answer usually says to add flex: 1 to the parent, but here is an example that has that and it still doesn't scroll.
You can test here, but make sure you select iOS or Android. It does scroll for web.
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
title: "First Item",
},
{
id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
title: "Second Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d72",
title: "Third Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d73",
title: "Fourth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d74",
title: "Fifth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d75",
title: "Sixth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d76",
title: "Seventh Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d77",
title: "Eighth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d77",
title: "Ninth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d77",
title: "Tenth Item",
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
Modify the SafeAreaView to be within it's own container and added a View container with flexGrow: 1 instead of flex: 1:
const App = () => {
return (
<SafeAreaView style={styles.safe}>
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (<Item title={item.title} />) }
keyExtractor={item => item.id}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safe: {
marginTop: StatusBar.currentHeight || 0,
},
container: {
flexGrow: 1
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
Above worked in a snack Expo testing for iOS. Entire sample code with a little re-write:
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const data = [
{
id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
title: "First Item",
},
{
id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
title: "Second Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d72",
title: "Third Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d73",
title: "Fourth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d74",
title: "Fifth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d75",
title: "Sixth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d76",
title: "Seventh Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d77",
title: "Eighth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d77",
title: "Ninth Item",
},
{
id: "58694a0f-3da1-471f-bd96-145571e29d77",
title: "Tenth Item",
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
return (
<SafeAreaView style={styles.safe}>
<View style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (<Item title={item.title} />) }
keyExtractor={item => item.id}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
safe: {
marginTop: StatusBar.currentHeight || 0,
},
container: {
flexGrow: 1
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App
export default class App extends Component {
constructor() {
super();
// flatlist data
this.state = {
data: [
{ key: "Skptricks", data: "one", name: "one" },
{ key: "Sumit" , data: "two" , name: "one"},
{ key: "Amit" , data: "three", name: "one"},
],
}
}
// flat list
render() {
return (
<View>
<FlatList
data={this.state.data}
renderItem={({item}) => <Text>{item.name}</Text>
/>
</View>
);
}
}
Can you explain what exactly do you need to print ? Please refer the code. I'm printing the 'name' item of your array. If you want to print 'data' items , use item.data inside renderItem. Let me know if you need any help.
const DATA = [{ key: "Skptricks", data: "one", name: "one" },
{ key: "Sumit" , data: "two" , name: "one"},
{ key: "Amit" , data: "three", name: "one"},
];
const Item = ({ name }) => (
<View style={styles.item}>
<Text style={styles.name}>{name}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item name={item.name} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
name: {
fontSize: 32,
},
});
I am trying to get a section list shown up having multiple columns.
Since section list have that feature not out of the box, I thought it might be a good idea to render a flatlist for every section item.. but I do not get it to work.
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FlatList } from "react-native";
import { SectionList } from "react-native";
class Account extends Component {
data2 =
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
data3 =
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28adfba',
title: '22--First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91adafa97f63',
title: '22--Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571efadfee29d72',
title: '22--Third Item',
},
];
data4 = ['a', 'b', 'c']
data = [
{sectionTitle: 'test-title-alpha', data: [this.data2]},
{sectionTitle: 'test-title-beta', data: [this.data3]},
];
_renderItem = ({item}) => {
console.log('render-item', item);
return (
<Text>item: {item}</Text>
)
}
_renderSectionHeader = ({item}) => {
console.log('section-header', item);
return (
<Text>section header: {item}</Text>
)
}
_renderSectionListItem = ({item}) => {
console.log('section-list-item', item);
return (
<FlatList
data={item}
numColumns={3}
renderItem={this._renderItem}
//keyExtractor={item => item.id}
/>
)
}
render () {
console.log('render', this.data);
console.log(this.data[0].sectionTitle);
return (
<SectionList
sections={this.data}
renderSectionHeader={this._renderSectionHeader}
renderItem={this._renderSectionListItem}
//keyExtractor={item => item.id}
/>
)
}
}
export default Account;
using data4 seems to proceed, using data2 or data3 seems not.
Anybody see my failure(s)?
Final output should be somethink near to:
first-section-title
item1.id item2.id item3.id
item1.title item2.title item3.title
item1.whatever item2.whatever item3.whatever
second-section-title
item4.id item5.id item6.id
item4.title item5.title item6.title
item4.whatever item5.whatever item6.whatever
...
(grid view, with x items per row)
from source
data = [
{
sectionTitle: 'first-section-title',
data: [
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d43',
title: 'and so on',
},
]
]
},
{
sectionTitle: 'second-section-title',
data: [
[
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: '5 Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: '6 Item',
},
]
]
},
];
working example (if somebody else should although need it)
import React, { Component } from 'react';
import { Text, View, FlatList, SectionList } from "react-native"
const sections = [
{
title: "Vegetables",
key: "vegetables",
data: [
{
list: [
{
name: "Carrot",
color: "Orange",
},
{
name: "Cabbage",
color: "Purple",
},
],
},
],
},
{
title: "Fruits",
key: "fruits",
data: [
{
list: [
{
name: "Apple",
color: "Green",
},
{
name: "Banana",
color: "Yellow",
},
{
name: "Strawberry",
color: "Red",
},
{
name: "Blueberry",
color: "Blue",
},
],
},
],
},
]
class Account extends Component {
renderSection = ({ item }) => {
return (
<FlatList
data={item.list}
numColumns={2}
renderItem={this.renderListItem}
keyExtractor={this.keyExtractor}
/>
)
}
renderSectionHeader = ({ section }) => {
return <Text>{section.title}</Text>
}
renderListItem = ({ item }) => {
return (
<View style={{height: 50, width: 100, borderColor: "green", borderWidth: 1 }}>
<Text>{item.name}</Text>
<Text>{item.color}</Text>
</View>
)
}
keyExtractor = (item) => {
return item.name
}
render () {
return (
<SectionList
sections={sections}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderSection}
/>
)
}
}
export default Account;
The app I'm making develops the following array format to store user input:
[
{name: Bob,
id: 1,
sports: [{sport: Baseball,
id: 1
},
{sport: Basketball,
id: 2
}]
},
{name: James,
id: 2,
sports: [{sport: Hockey,
id: 3
},
{sport: Soccer,
id: 4
}]
}
]
I am trying to render this to effectively get the following output:
<Text>Bob</Text>
<Text>Baseball</Text>
<Text>Basketball</Text>
<Text>James</Text>
<Text>Hockey</Text>
<Text>Soccer</Text>
I would of thought I could achieve this by mapping within a map eg:
{Array.map((item) => {
return(
<Text>{item.name}</Text>
{item.sports.map((item2) => {
return(
<Text>{item2.sport}</Text>
)
})
)
})}
but can't get anything like this to work. I can console.log the results I want with:
const display = Array.map(item => {
return console.log(item.name, item.sports.map(item2 => {
return item2.sport}))
})
But I guess I don't know how to render this out?
You have a lot of errors in the code or is it a neglect of responders.
const userInput = [
{
name: "Bob",
id: 1,
sports: [
{ sport: "Baseball", id: 1 },
{ sport: "Basketball", id: 2 },
],
},
{
name: "James",
id: 2,
sports: [
{ sport: "Hockey", id: 3 },
{ sport: "Soccer", id: 4 },
],
},
];
{userInput.map((user) => (
<>
<Text>{user.name}</Text>
{user.sports.map((s) => (
<Text>{s.sport}</Text>
))}
</>
))}
Ok so I just found out what I was doing wrong haha. I need to have the content from my first map and the second map function encased in one View. Eg:
const display = Array.map(item => {
return (
<View> <------------------------I didn't have these originally
<View>
<Text>
{item.name}
</Text>
</View>
{item.sports.map(item2 => {
console.log(item2)
return (
<View>
<Text>
{item2.sport}
</Text>
</View>
)
})}
</View> <------------------------I didn't have these originally
)
})
I need to show a flag icon along with the text. I have all the image stored in assets folder. These are the codes that I have tried so far. I have stored the icon in a const and which I later think of calling. I want to show icon and lang horizontally with icon at left side.
const language = [
{ lang: "English", code: "en", icon: require(`../assets/us.png`) },
{ lang: "French", code: "fr", icon: require(`../assets/th.png`) },
{ lang: "Japanese", code: "jp", icon: require(`../assets/jp.png`) },
]
class App extends Component {
onSelectLanguage = () => {
return (
language.map((data, i) => {
return (
<View key={i} style={styles.dropDownView}>
<TouchableOpacity onPress={() => this.onSelectedLang(data)}>
<Text style={styles.dropDownText}><Image source="{data.icon}" />{data.lang}</Text>
</TouchableOpacity>
</View>
)
})
)
}
}
Try this code:
const language = [
{ lang: "English", code: "en", icon: require(`../assets/us.png`) },
{ lang: "French", code: "fr", icon: require(`../assets/th.png`) },
{ lang: "Japanese", code: "jp", icon: require(`../assets/jp.png`) },
]
class App extends Component {
onSelectLanguage = () => {
return (
language.map((data, i) => {
return (
<View key={i} style={styles.dropDownView}>
<TouchableOpacity onPress={() => this.onSelectedLang(data)}>
<Text style={styles.dropDownText}><Image source={data.icon} />{data.lang}</Text>
</TouchableOpacity>
</View>
)
})
)
}}