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>
Related
I want to create something like this 👇
The data I am getting from backend is like this 👇
[
"C",
"C++",
//So on
]
You can do this by using flexWrap:'wrap'
For Example,
<FlatList
data={data}
keyExtractor={(item, index) => index.toString()}
contentContainerStyle={{ justifyContent: 'flex-start', flexDirection:
'row', flexWrap: 'wrap', paddingHorizontal: 20 }}
renderItem={({ item }) =>
<TouchableOpacity style={{ padding: 10 }}>
<Text style={{ backgroundColor: '#edf4fa', fontSize: 22,
padding: 10, borderRadius: 10 }}>{item}</Text>
</TouchableOpacity>
}
/>
I've created a custom dropdown using TouchOpacity component of react native as follows.
<View style={dropDownStyle}>
<TouchableOpacity onPress={() => _switchTimeSpan('Day')}>
<Text style={dropDownItemStyle}>Day</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => _switchTimeSpan('Week')}>
<Text style={dropDownItemStyle}>Week</Text>
</TouchableOpacity>
</View>
The style is as follows.
dropDownStyle: {
position: 'absolute',
marginTop: 20,
width: 80,
},
dropDownItemStyle: {
marginTop: 5,
flex: 1,
textAlign: 'right',
},
When pressed the TouchOpacity component doesn't trigger the onpress function. This issue only exists in android and not IOS.
Edit 1 : There is a areachart created use react-native-svg-charts which is being overlapped by the mentioned dropdown. However upon inspecting if the reason for the onPress not working could be because of zIndex issues i noticed that the mentioned dropdown is the top most component.
The code for the chart is the following.
I am using react-native-svg-charts
<View style={containerStyle}>
<YAxis
data={data}
style={yAxisStyle}
formatLabel={value => yAxisFormat(value)}
contentInset={verticalContentInset}
numberOfTicks={5}
svg={axesSvg}
/>
<View style={chartWrapperStyle}>
<AreaChart
style={chartStyle}
data={data}
contentInset={verticalContentInset}
curve={shape.curveCatmullRom}
svg={{ fill: '#FF4D4D' }}
animate
/>
<View style={xAxisStyle}>
{
timeSpan !== 'Month' && (
<XAxis
data={data}
// formatLabel={(value, index) => months[value]}
formatLabel={(value, index) => xAxisPoints[index]}
contentInset={{ left: 10, right: 10 }}
// numberOfTicks={5}
svg={axesSvg}
/>
)
}
</View>
</View>
</View>
The style for the chart is as follows.
containerStyle: {
height: 200,
paddingLeft: 20,
paddingRight: 20,
flexDirection: 'row',
},
yAxisStyle: {
// marginBottom: 20,
position: 'absolute',
height: 180,
left: 20,
zIndex: 2,
},
chartStyle: {
flex: 1,
},
chartWrapperStyle: {
flex: 1,
},
xAxisStyle: {
marginHorizontal: -5,
height: 20,
},
When I'm testing this as isolated and only component on screen everything seems to work properly on Android (Samsung Galaxy Tab 2). Try to isolate this component and see if it will work for you on Android, maybe other components affect it. Also you could try to check if container component (with dropDownStyle) has some height or try to set 100%.
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>
)
}
}
I have tried using a FlatList and a map function to generate a list of entries, but I am getting random lines between the entries (see the blue part of my screenshot)
What is causing these and how can I remove them?
Here is my FlatList:
<FlatList
data={TriageTransfertData[0].content[0].content}
renderItem={({ item }) => (
<View style={styles.subentryContainer}>
<View style={styles.ttEntryFirst} />
<View style={styles.ttEntryContentSub}>
<Text style={styles.ttTextSub}>{item.text}</Text>
</View>
</View>
)}
keyExtractor={item => item.text} />
And here is the styling:
subentryContainer: {
flexDirection: 'row',
width: '100%',
},
ttEntryFirst: {
width: '2%',
backgroundColor: Colors.Blue
},
ttEntryContentSub: {
width: '98%',
justifyContent: 'center',
paddingLeft: responsiveWidth(2),
paddingTop: 10,
paddingBottom: 10,
borderTopWidth: 1,
borderColor: Colors.GreyLight
},
And finally, here is a screenshot (notice the unwanted line in the blue area):
I think you're talking about ItemSeparatorComponent. It's rendered by default in a FlatList, but you can override it passing a custom component or a blank code function.
Here is the brief doc.
Hope this helps!
I am following the tutorial in the link: https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e .
However I can't seem to understand how to add tabs to this such that the tab headers get fixed to top when scrolled up. Can anyone please suggest how to achieve this?
I was able to achieve it using ScrollableTab and Tab in native-base library.
Code looks like this
<Tabs
prerenderingSiblingsNumber={3}
onChangeTab={({ i }) => {
this.setState({ height: this.heights[i], activeTab: i })
}}
renderTabBar={(props) => (
<Animated.View style={{ transform: [{ translateY: tabY }], zIndex: 1, width: "100%", backgroundColor: "white", paddingTop: HEADER_MAX_HEIGHT }}>
<ScrollableTab
{...props}
renderTab={(name, page, active, onPress, onLayout) => (
<TouchableOpacity key={page}
onPress={() => onPress(page)}
onLayout={onLayout}
activeOpacity={0.4}>
<Animated.View
style={{
flex: 1,
height: 100,
backgroundColor: tabBg
}}>
<TabHeading scrollable
style={{
backgroundColor: "transparent",
width: Dimensions.get('window').width / 2
}}
active={active}>
<Animated.Text style={{
fontWeight: active ? "bold" : "normal",
color: 'black',
padding: 10,
fontSize: active ? 20 : 18
}}>
{name}
</Animated.Text>
</TabHeading>
</Animated.View>
</TouchableOpacity>
)}
underlineStyle={{ backgroundColor: 'black' }}
/>
</Animated.View>
)}>
<Tab heading="Tab 1">
{this.tabContent(30, 0)}
</Tab>
<Tab heading="Tab 2">
{this.tabContent(15, 1)}
</Tab>
</Tabs>
use this:
expo install react-native-gesture-handler react-native-reanimated
Then basic usage look like this to replace in <Animated.View ......<Text>....</Text>..... ></Animated.View>:
<TabView
navigationState={{ index, routes }}
onIndexChange={setIndex}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
})}
/>
I hope it'll help you..!
In case anybody else falls on this thread, I developed a new package, react-native-animated-screen, that does exactly what you need
Check it out
https://www.npmjs.com/package/react-native-animated-screen
import React from 'react';
import { Image, Text, View } from 'react-native';
import AnimatedScreen from 'react-native-animated-screen';
const Component = () => {
return (
<AnimatedScreen.Wrapper>
<AnimatedScreen.Header>
<View>
<Text>Title</Text>
<AnimatedScreen.CollapsibleElement>
<Text>Subtitle</Text>
</AnimatedScreen.CollapsibleElement>
<AnimatedScreen.Element>
<YourTabsComponen />
</AnimatedScreen.Element>
</View>
</AnimatedScreen.Header>
<AnimatedScreen.ScrollView>
<View style={{ height: '300%' }}>
<View>
<Text>Body</Text>
</View>
</View>
</AnimatedScreen.ScrollView>
</AnimatedScreen.Wrapper>
);
};
In the example above only the title and YourTabBComponentare going to remain after scrolling, the subtitle (as all the elements wrapped in a CollapsibleElement) will disappear.
Ideally you could also have the tabs to appear only when entirely scrolled using the interpolate prop or the animatedStyle of the AnimatedScreen.Element
// using interpolate the animation will flow from 0 to scrollY === headerMaxHeight
<AnimatedScreen.Element interpolate={{ opacity: [0, 1], height: [0, 60]Â }}>
<TabComponent />
</AnimatedScreen.Element>
// alternatevely you can have more control with an animatedStyle
<AnimatedScreen.Element animatedStyle={scrollY => ({
opacity: scrollY.interpolate({
inputRange: [100, 200],
outputRange: [0, 1]
extrapolate: 'clamp'
})
})}>
<TabComponent />
</AnimatedScreen.Element>
In case anybody else falls on this thread, I developed a new package, react-native-animated-screen, that does exactly what you need
Check it out
https://www.npmjs.com/package/react-native-animated-screen
import React from 'react';
import { Image, Text, View } from 'react-native';
import AnimatedScreen from 'react-native-animated-screen';
const Component = () => {
return (
<AnimatedScreen.Wrapper>
<AnimatedScreen.Header>
<View>
<Text>Title</Text>
<AnimatedScreen.CollapsibleElement>
<Text>Subtitle</Text>
</AnimatedScreen.CollapsibleElement>
<AnimatedScreen.Element>
<YourTabsComponen />
</AnimatedScreen.Element>
</View>
</AnimatedScreen.Header>
<AnimatedScreen.ScrollView>
<View style={{ height: '300%' }}>
<View>
<Text>Body</Text>
</View>
</View>
</AnimatedScreen.ScrollView>
</AnimatedScreen.Wrapper>
);
};
In the example above only the title and YourTabBComponentare going to remain after scrolling, the subtitle (as all the elements wrapped in a CollapsibleElement) will disappear.
Ideally you could also have the tabs to appear only when entirely scrolled using the interpolate prop or the animatedStyle of the AnimatedScreen.Element
// using interpolate the animation will flow from 0 to scrollY === headerMaxHeight
<AnimatedScreen.Element interpolate={{ opacity: [0, 1], height: [0, 60]Â }}>
<TabComponent />
</AnimatedScreen.Element>
// alternatevely you can have more control with an animatedStyle
<AnimatedScreen.Element animatedStyle={scrollY => ({
opacity: scrollY.interpolate({
inputRange: [100, 200],
outputRange: [0, 1]
extrapolate: 'clamp'
})
})}>
<TabComponent />
</AnimatedScreen.Element>