I want to create list with radio button using flatlist, but problem is i am able to click on radio button, its not geeting unchecked inside flatlist.
HERE IS MY CODE
<FlatList
data={this.state.addressData}
horizontal={false}
extraData={this.state}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => (
<Card containerStyle={{ backgroundColor: GlobalColors.white, marginLeft: 0, marginRight: 0, marginTop: 0, marginBottom: 10, elevation: 2, padding: 0, borderColor: GlobalColors.white }}>
<View style={{ backgroundColor: GlobalColors.white, padding: 15 }}>
<View style={SelectAddressStyle.horizontalChangeAddress}>
<Radio style={{marginRight : 10}} selected = {true}></Radio>
<Text style={SelectAddressStyle.txtAddressUserName}>{""}</Text>
<Text style={SelectAddressStyle.addressType}>{"HOME"}</Text>
</View>
<Text style={SelectAddressStyle.txtAddress}>
{""}
</Text>
</View>
</Card>
)} />
You have:
<Radio style={{marginRight : 10}} selected = {true}></Radio>
So it can't become unchecked. Maybe try passing in a selected property.
Idk what package you are using for Radio (React native does not have radio by itself) but the problem is that according to this part of your code <Radio style={{marginRight : 10}} selected = {true}></Radio>, you're always passing true to your selected prop, so it won't change in any cases, until you declare a toggle function for it and store its current status in component state. example:
class Example extends component{
state = {
radioStatus: false
}
toggleRadio = () => {
const {radioStatus} = this.state;
this.setState({ radioStatus: !radioStatus})
};
render(){
const {radioStatus} = this.state;
return(
<View>
<Radio selected={radioStatus} onChange={this.toggleRadio} />
</View>
)
}
}
Related
I have a FlatList nested in a SectionList as shown below.
There is always 3 sections (rows) and each section has a FlatList with a horizontal scroll.
Expected
On button click, invoking the scrollToEnd() function, to scroll all 3 flatlists from each section to end.
Problem
Only the bottom or last flatlist scrolls to the end.
I cannot figure out why this is - I thought the ref in the flatlist may only be referencing the last Flatlist rendered and not the other two, maybe? If so, any tips or suggestions are welcome. Thank you.
...
const flatlistRef = useRef();
const scrollToEnd = () => {
flatlistRef.current.scrollToEnd({ animating: true });
};
...
<SectionList
contentContainerStyle={styles.sectionListContainer}
stickySectionHeadersEnabled={false}
sections={myData}
renderSectionHeader={({ section }) => (
<>
<FlatList
horizontal
data={section.data}
contentContainerStyle={
styles.flatlistContainer
}
renderItem={({ item }) => (
<Button
onPress={() => updateData(item.id)}
>
<ListItem item={item} />
</Button>
)}
showsHorizontalScrollIndicator={false}
ref={flatlistRef}
/>
</>
)}
renderItem={({}) => {
return null;
}}
/>
I have also working on this but I found a solution where I can create a Section.List by using react-native-paper.
But you can also use the map function, Here is the code of that
import React from "react";
import {View,Text} from "react-native";
const App = () =>{
return(
<View style={{flex: 1}}>
{data.map((item, index) => (
<View key={index} style={{borderBottomColor: 'black', borderBottomWidth: 2}}>
<Text style={{fontSize: 30, fontWeight: 'bold'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: '#7fc', borderBottomColor: 'blue', borderBottomWidth: 2}}>
<Text style={{fontSize: 20, marginLeft: 40, color: 'blue'}}>{item.title}</Text>
{item.items && <>
{item.items.map((item, index) => (
<View key={index} style={{backgroundColor: 'yellow', borderBottomColor: 'red', borderBottomWidth: 2}}>
<Text style={{fontSize: 16, marginLeft: 80,}}>{item.title}</Text>
</View>
))}
</>}
</View>
))}
</>}
</View>
))}
</View>
)
}
export default App;
I hope It will help.
im using Stack.Navigator to provides screen, on main screen using Flatlist render data
getting that error on Android only, difference weird view each time focus , it working fine on iOS
im was trying with other solutions but no luck
const DATA = [
...
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const renderItem = ({ item }) => <Item title={item.title} />;
return (
<KeyboardAvoidingView
style={{ flex: 1, backgroundColor: 'red' }}
behavior='height'
keyboardVerticalOffset={-500}
>
<View style={{ flex: 1 }}>
<FlatList style={{ flex: 1 }} data={DATA} renderItem={renderItem} />
<TextInput placeholder='Input' style={styles.textInput} />
<KeyboardSpacer />
<SafeAreaView />
</View>
</KeyboardAvoidingView>
);
and setting on app.json
"softwareKeyboardLayoutMode": "pan"
Im using
"expo": "^43.0.0",
"react-native": "0.64.3",
thank you!
The modal Stack.Screen is behaving differently on iOS and Android. On iOS modal is covering the full screen, but on Android not. I would like to have a static header with some UI (burger etc.), that is present in all screens and I don't want to animate the same UI as Stack.Screen header every time I change the screen. To achieve this I have added a static header outside Stack.Navigator. Everything works as expected apart from modal screen. When I initialise modal screen I expect it to cover the whole screen - also the static header. That is true for iOS. However on Android the static header component is not covered. I guess it is due to the fact that my static header "lives" outside Stack.Navigator.
I have created snack, so check it out https://snack.expo.dev/#fjckls/fullscreen-modal-android-issue
How to implement the desired behaviour with static header? Thanks!
const Contacts = ({ navigation }) => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Contacts</Text>
<Button title="Show Modal" onPress={() => navigation.navigate('Modal')} />
</View>
);
};
const About = () => {
return (
<View style={{ flex: 1 }}>
<Text>About</Text>
</View>
);
};
const Modal = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>This is fullscreen modal!!!</Text>
</View>
);
};
const MyStaticHeader = () => {
return (
<View style={{ height: 60, justifyContent: 'center', alignItems: 'center', backgroundColor:'orange' }}>
<Text>MY STATIC HEADER!!</Text>
</View>
);
};
const TopTab = createMaterialTopTabNavigator();
const HomeTabs = () => {
return (
<TopTab.Navigator>
<TopTab.Screen name="Contacts" component={Contacts} />
<TopTab.Screen name="About" component={About} />
</TopTab.Navigator>
);
};
const Stack = createNativeStackNavigator();
const App = () => {
return (
<SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
<StatusBar animated={true} backgroundColor="#61dafb" />
<MyStaticHeader />
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Home" component={HomeTabs} />
<Stack.Screen
name="Modal"
component={Modal}
options={{ presentation: 'modal',animation: 'slide_from_bottom' }}
/>
</Stack.Navigator>
</NavigationContainer>
</SafeAreaView>
);
};
I would like use DrawerLayoutAndroid module on React-Native app. For use openDrawer programmaticaly, i use useRef hook.
On run this method, my Drawer show only black "overflow", but not the navigation.
If i swip to the right, my Drawler menu will be show :/
My code :
const Layout = ({ children }) => {
let drawler = useRef(null);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
ref={drawler}
renderNavigationView={() => (
<View style={{ flex: 1, backgroundColor: '#fff' }}>
<Text style={{ margin: 10, fontSize: 15, textAlign: 'left' }}>
I'm in the Drawer!
</Text>
</View>
)}>
<View style={{ flex: 1 }}>
<ScrollView>
<View style={styles.container}>
<Button onPress={() => drawler.current.openDrawer()}> // Show only overflow, not the menu
Open drawler
</Button>
{children}
</View>
</ScrollView>
</View>
</DrawerLayoutAndroid>
);
};
Anyone can help me ?
I solved the issue with useCallback
const [drawer, setDrawer] = useState();
const refDrawer = useCallback(element => {
setDrawer(element);
}, []);
Don't forget set ref={refDrawer} attribute to the DrawerLayoutAndroid component.
Hi I want to set an array for posting . Though I have already set Array for displaying in Flatlist Now I have to post . Here is my code
<FlatList
data={this.state.data}
showsVerticalScrollIndicator={false}
renderItem={({ item }) => (
<View
<Text
style={{
flex: 2,
fontSize: 15,
// fontFamily: "Roboto",
// justifyContent: "space-between",
width: 150
}}
>
{item.rollno}
--
{item.name}
<RadioForm
animation={true}
buttonColor={"#C2E3A9"}
formHorizontal={true}
labelHorizontal={true}
buttonStyle={{ marginRight: 20 }}
radioStyle={{ paddingRight: 20 }}
// labelHorizontal={false}
style={{
flex: 1,
paddingRight: 20,
flexDirection: "row",
//padding: 10,
width: 30
}}
radio_props={radio_props}
initial={this.state.value}
onPress={value => {
this.setState({ value: value });
}}
ItemSeparatorComponent={this.renderSeparator}
How I want set Array because I want post .I want like this [enter link description here][1]
[1]: http://jsfiddle.net/jensbits/MWSeg/. How I can do this .
You need to do just 2 things to add new post value in flatlist array
1 push posted data in state and re-render
this.state.data.push(newPost) // push data
this.setState({ }) // update state for re-render
2 Update flatList
extraData={this.state}
//for example
<FlatList
data={this.state.data}
extraData={this.state}
renderItem={({ item }) => (
<View
//Your stuff
</View>
</FlatList>