react-native : How to show collabsible on top of a view - javascript

I am using react-native-collapsible and it works well but I need the collapsible view to show on top of my flatlist.
When I use collapsible view it will push down my flatlist. I want to see my collapsible view on top of my flatlist
This is my collapsible view:
collapsibleView() {
return (
<Collapsible collapsed={!this.state.collapsed}>
<View
style={{
justifyContent: 'flex-end',
alignItems: 'flex-end',
paddingRight: 10,
}}>
<View
style={{
marginTop: 10,
width: 68,
height: 134,
backgroundColor: 'white',
shadowColor: 'black',
shadowOffset: {width: 0, height: 2},
shadowOpacity: 0.2,
shadowRadius: 2,
marginBottom: 2,
borderRadius: 4,
}}>
<ScrollView>
<CollapsibleStyle style={styles.popupMonth} text="8월" />
<CollapsibleStyle style={styles.popupMonth} text="9월" />
<CollapsibleStyle style={styles.popupMonth} text="10월" />
<CollapsibleStyle style={styles.popupMonth} text="11월" />
<CollapsibleStyle style={styles.popupMonth} text="12월" />
</ScrollView>
</View>
</View>
</Collapsible>
);
}
In this is my code with flatlist:
render() {
return (
<View style={styles.container}>
{this.customHeaderHandler()}
{this.collapsibleView()}
<FlatList
data={this.state.data}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
ItemSeparatorComponent={this.renderSeparator}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh}
/>
</View>
);
}
My view will look like this:


Try to give this style to a flat list.
style={{top: 0}}
Or add parent view to flatlist and same style property.

Related

How to fix ReactNavigation Error in react native

I was trying to implement the react-native navigation and I got the error "Looks like you have nested a 'Navigation Container' inside another..."
The Error Image for the First One
So I tried to fix it by putting independent={true} but it just quits the app and does not load. So I removed the NavigationContainer and I get the error "Couldn't register the navigator. Have you wrapped your app with 'Navigation Container'?"
The Error Image for the Second One
My Code is at the end of this question. The Navigation Container is at the end of the code.
How do I fix it? If somebody could help it would really help thanks in advance.
<View style={{backgroundColor: '#010101'}}>
<Header />
<View>
<Text style={{fontSize: 40, fontWeight: 'bold', marginLeft: 15, color: 'white'}}>Chats</Text>
</View>
<View style={styles.thirdSec}>
<View>
<Text style={styles.textLeft}>Broadcast List</Text>
</View>
<View>
<Text style={styles.textRight}>New Group</Text>
</View>
</View>
<View
style={{
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
}}
/>
<ScrollView>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
</ScrollView>
<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name="Chats" component={Home} />
</Tabs.Navigator>
</NavigationContainer>
</View>

I think this is what you want.
import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { Header } from 'react-native-elements';
import ChatList from './ChatList';
function Home() {
return (
<View style={{backgroundColor: '#010101'}}>
<Header
leftComponent={{ icon: 'menu', color: '#fff', iconStyle: { color: '#fff' } }}
centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
rightComponent={{ icon: 'home', color: '#fff' }}
/>
<View>
<Text style={{fontSize: 40, fontWeight: 'bold', marginLeft: 15, color: 'white'}}>Chats</Text>
</View>
<View>
<View>
<Text>Broadcast List</Text>
</View>
<View>
<Text>New Group</Text>
</View>
</View>
<View
style={{
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
}}
/>
<ScrollView>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
<ChatList />
<View
style={{
marginTop: 5,
borderBottomColor: '#2b2b2d',
borderBottomWidth: 1,
marginHorizontal: 30
}}
/>
</ScrollView>
</View>
);
}
const Tabs = createBottomTabNavigator();
function MyTabs() {
return (
<Tabs.Navigator>
<Tabs.Screen name="Chats" component={Home} />
</Tabs.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
Take a look at this snack:
https://snack.expo.dev/#devsaeedhabibi/navigationcontainer
If this answer does not help,
Please provide more complete information about what you want.
Please check the React Navigation document:
https://reactnavigation.org/docs/navigation-container/

.map() function displays my hidden animated view for each child in React Native. And I am using keys and id

I have a hidden animated view that displays when you click on the specific account name. Currently, when you click an account name, the animated hidden view displays for all the children in the .map() function. I tried adding the key and id to the animated view as well but that does not work either. Still shows the hidden animated view for all the children in the map.
<ScrollView style={{flex: 1}} showsVerticalScrollIndicator={true}>
{accounts.map(account => (
<View key={account.id} id={account.id}>
<View
style={{
width: '100%',
backgroundColor: colors.primary,
borderRadius: 10,
padding: 10,
marginBottom: 10,
marginTop: 10,
zIndex: 1,
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
}}>
<Text
onPress={() => setHidden(!hidden)}
style={{
fontSize: 30,
textAlign: 'left',
flex: 1,
marginTop: 'auto',
marginBottom: 'auto',
}}>
{account.name}
</Text>
<View>
<Text
style={{
fontSize: 30,
textAlign: 'right',
flex: 1,
marginBottom: 10,
}}>
{account.amount}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
}}>
<DeleteAccount account={account.name} />
<Icon name="wrench" size={25} color="#000000" />
</View>
</View>
</View>
</View>
{hidden ? (
<Animated.View
key={account.id}
id={account.id}
style={[
styles.subView,
{transform: [{translateY: bounceValue}]},
]}>
<Text>{account.name}</Text>
</Animated.View>
) : null}
</View>
))}
</ScrollView>```

drop down menu hiding behind content

I have a screen that looks like this:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
</View>
</View>
</SafeAreaView>
);
Its Stlyes are as like this:
export const styles = StyleSheet.create({
container: {
height: '100%',
width: '100%',
},
topContainer: {
height: moderateScale(750),
},
topTextContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginVertical: moderateScale(15),
height: moderateScale(30),
paddingLeft: moderateScale(30),
paddingRight: moderateScale(30),
},
topMiddleContainer: {
alignItems: 'center',
},
topMiddleText: {
justifyContent: 'center',
paddingBottom: 40,
},
searchFieldContainer: {
alignItems: 'center',
height: moderateScale(120),
},
button: {
width: moderateScale(120),
borderRadius: moderateScale(20),
alignItems: 'center',
alignContent: 'center',
},
buttonContainer: {
flexDirection: 'row',
justifyContent: 'center',
},
searchField: {
width: moderateScale(300, 0.3),
height: verticalScale(40),
marginVertical: moderateScale(3),
borderRadius: verticalScale(10),
},
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
}
});
When I write something in the first input field, I get search results through the LocationsFound component. However, the search results start to hide behind the second input field. I want it to simply overlap and come on top of the second field until one of them is selected. Is that possible?

Have you tried zIndex?
dropdown:{
position: 'absolute',
top: 200,
zIndex: 10,
backgroundColor: '#fff'
}

It works for me I gave negative zIndex to the View which was showing on my dropdown list.
<View>
<DropDownPicker ... />
</View>
<View style={{ zIndex : -5 }}>
<Button ... />
<Button ... />
</View>

The first thing you could try is to change the order of your DOM objects and be sure to add your result as last item:
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topContainer}>
<View style={styles.searchFieldContainer}>
<FavoritePointInput
textChangeHandler={textChangeHandler}
/>
</View>
<View style={styles.fieldDescription}>
<Text>Set Location's Name:</Text>
</View>
<View style={styles.searchFieldContainer}>
<Item style={styles.searchField}>
<Input
placeholder="Library"
onChangeText={(text) => setLocationName(text)}
style={styles.searchText}
/>
</Item>
</View>
<View style={styles.buttonContainer}>
<Button style={styles.button}>
<Text>Save Location</Text>
</Button>
</View>
<View style={styles.dropdown}>
<LocationsFound
addressesFound={locations.favAddressesFoundList}
/>
</View>
</View>
</View>
</SafeAreaView>
);
Another solution could be to add a z-index to your dropDown:
fieldDescription: {
alignItems: 'center',
},
dropdown:{
position: 'absolute',
top: 200,
zIndex: 1 // ... or more
}

I fixed this issue by adding dropDownDirection="TOP" props into dropdown component which render dropdown container upside.
<DropDownPicker
dropDownDirection="TOP"
...
/>

Fix Position of a FlatList

I am using a FlatList in my code like this:
<View style={styles.listHolder}>
{data && (
<FlatList
data={data.me.friends.nodes}
horizontal={false}
scrollEnabled
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
)}
{error && <ErrorContainer />}
</View>
listHolder: {
width: '100%',
alignItems: 'center',
},
Each of the FriendItem looks somewhat like this:
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails', {
firstName: friend.firstName,
rating: friend.rating,
numberOfFriends: friend.friendsOfFriends?.totalCount,
//onDeleteFriend: onDeleteFriend,
vehicles: friend.vehicles,
})
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}} />
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
Now the problem is that the FlatList is rendered vertically but its scroll bar is shown horizontally (which shouldn't happen). Additionally, I can move it in any direction right now. This should also not happen. I must fix it as it is. How can I do so? I am not sure if this is a styling issue or something in the FlatList component.

an you add the alwaysBounceVertical in the elow flatlist,
<FlatList
data={data.me.friends.nodes}
horizontal={false}
alwaysBounceVertical={true}
scrollEnabled
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
Hope it helps. feel free for doubts

Show 2 records per row

I want to map through an array, that may contain even or odd number of elements, and I want to show 2 records per row in my react native component, <Viewstyle={{flexDirection: 'row',height: 180,width: '83.33%',
alignSelf: 'center', justifyContent: 'center'}}></View> please how can I map through the array by 2 records, not just one record
This is what I've tried so far
const goods = (
<FlatList
data={this.state.goods}
renderItem={({ item }) => (
<TouchableNativeFeedback
onPress={() =>
this.props.navigation.navigate('ProductDetail', {name: item.name,
amount: item.amount,
description: item.description,
images: item.images,
qty: item.quantity,
id: item.id}
)}>
<View style={{flexDirection: 'row',height: 180,width: '83.33%',
alignSelf: 'center', justifyContent: 'center'}}>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{flex: 1, flexDirection: 'column',justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../headset.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{height:180, flexDirection: 'column', justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../case_.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
</View>
</TouchableNativeFeedback>
)}
keyExtractor={item => item.id}
horizontal={true}
/> );
Below is how I want the data to be rendered, 2 records per row, I read through array reduce docs but I doubt if it will work for this situation
<View style={{flex: 1,
flexDirection: 'column'}}>
<View style={{flexDirection: 'row',height: 180,width: '83.33%',
alignSelf: 'center', justifyContent: 'center'}}>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{flex: 1, flexDirection: 'column',justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../headset.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
<TouchableNativeFeedback onPress={() =>
this.props.navigation.navigate('ProductDetail', {})}>
<View style={{height:180, flexDirection: 'column', justifyContent: 'space-evenly'}}>
<View style={{height: Height*(17.19/100),
width: Width*(40/100),
marginRight: 10,
borderTopRightRadius: 6,
borderTopLeftRadius: 6,
borderBottomLeftRadius: 6,
borderBottomRightRadius: 6,
backgroundColor: '#FAFAFA',
borderWidth: 0.4,
borderColor: '#DADADA',
elevation: 0}}>
<Image resizeMode="contain" style={{alignSelf: 'center', flex: 1}}
source={require('../case_.png')}/>
</View>
<View style={{flexDirection: 'column'}}>
<Text style={{fontFamily: 'mont-semi',fontSize: 12,color: '#615d5d',
paddingLeft: 10}}>
Headset
</Text>
<Text style={{fontFamily: 'mont-medium',color: '#615d5d',fontSize: 8
,paddingLeft: 10}}>
₦230,000.00
</Text>
</View>
</View></TouchableNativeFeedback>
</View>
</View>

You can set numColumns property to 2 of FlatList to display 2 columns per row. Take a look at the document. Also note, you should set horizontal={false}
Hope this will help!

you need to define numColumns in flatlist, something like this
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, FlatList, Image, TouchableOpacity, Dimensions, TouchableNativeFeedback } from 'react-native';
export default class Test extends Component {
constructor() {
super();
this.state = {
data : [
{uri : 'https://uploads.siteduzero.com/files/6001_7000/6410.jpg'},
{uri : 'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pluto_color_mapmosaic.jpg'},
{uri : 'https://www.w3schools.com/Css/paris.jpg'},
{uri : 'https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia21975-opt.jpg'},
]
}
}
_renderItem = ({item}) => {
console.log(item.uri)
return (
<View style={{flexDirection:'row' ,flex:1,borderWidth:4,borderColor:'white'}}>
<Image style={{width:Dimensions.get('window').width/2 , height:100}} resizeMode="cover" source={{uri : item.uri}} />
</View>
)
}
_keyExtractor = (item, index) => item.uri.toString();
render() {
return (
<FlatList
numColumns={2}
data={this.state.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
}

Categories

Resources