Develop Reference

How to do it some items or headers should not render multiple time in react native

I have Table on right side there is columns on the top each box there is heading so . I just Want that. that heading should not repeat. on each box . it should only repeat on the top of the column.
here is code - https://snack.expo.dev/#xeteke8423/sellerformat

You can solve that by passing the index prop to the SecondaryBox and render the heading conditionally.
Make following changes in your codebase:
App.js:
//.......
<View>
{sample.map((item) => (
<View style={{ flexDirection: 'row' }}>
{item['sellerId']?.map((buyer, index) => (
<SecondaryBox sellerId={buyer} index={index} />
))}
</View>
))}
</View>
//.......
And in your SecondaryBox.js render the heading conditionally like below:
//............
<ScrollView horizontal>
{
<View style={{ flexDirection: 'row' }}>
<View style={{ marginLeft: 10 }}>
{index === 0 ? (
<View style={{position: ""}}>
<Text>Seller Profile</Text>
<Text>View Remark</Text>
<Text>Unit/Price</Text>
</View>
) : (
<View style={{ height: 55 }}></View>
)}
//............
Here is the output:

TouchableOpacity overwriting other buttons

In my component, I was rendering a button for each Item. It was working. However, when I wrap all of it in a touchable TouchableOpacity, the button no longer works. Everything is the touchable opacity now. How can I still use the button?
return (
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<View style={styles.item} key={item.id}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
</TouchableOpacity>
);
},

Change like this? (Wrap the tag except the button?)
return (
<View style={styles.item} key={item.id}>
<TouchableOpacity onPress= {()=> console.log('Hello')}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',
}}></Thumbnail>
<View style={styles.nameNumber}>
<Text style={styles.userName}>{userName}</Text>
</View>
</TouchableOpacity>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteContact(item.id)}
>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
},

Can't position React Native View at the bottom

I am trying to position a React Native view at the bottom of my screen:
<TouchableHighlight onPress={() => this.logout()}>
<View style={{ position: "absolute", bottom: 0 }}>
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
And the parent:
<Fragment>
<View>
<ProfileSettings profile={this.state.profile} />
<MainSettings data={this.state} />
</View>
<LogoutSettings />
</Fragment>
And then the layout:
<Fragment>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
{/*<BackgroundProcess />*/}
<Header />
{this.props.children}
</SafeAreaView>
</Fragment>
As far as I can tell, this should get me all the way to the bottom...
However instead, my View centers right in the middle of the screen.
What am I doing wrong here? Is there a better way to position a view at the bottom of the screen? Plenty of tutorials say to use position absolute and bottom 0, but it does not appear to be working in my specific use case

You can do it without position absolute . Add "flex:1" to view before "LogoutSettings" so it will have full height and "LogoutSettings" will be shown at bottom
Try this in parent
<Fragment>
<View style={{flex:1}}>
<ProfileSettings profile={this.state.profile} />
<MainSettings data={this.state} />
</View>
<LogoutSettings />
</Fragment>
Remove position absolute
<TouchableHighlight onPress={() => this.logout()}>
<View >
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>

I think you want the style on TouchableHighlight, not View
<TouchableHighlight onPress={() => this.logout()} style={{ position: "absolute", bottom: 0 }}>
<View>
<Text>{SignOut}</Text>
</View>
</TouchableHighlight>
You don't really need that View at all actually

How can set menu size fixed in react native?

I am setting option menu when click on icon,but it show menu sizes different rather than same. I am setting this menu as flat list item, and using react-native-popup-menu library, and any other way to display menu.I want to use menu options with fixed height and width of each of them.
Here is my code :-
_renderItem = ({item}) => {
return(
<TouchableOpacity onPress={() => this.handleListItemPress(item)}>
<View >
<View >
<View style={{flexDirection:'row',marginBottom:2}}>
<ImageView
image={item.pictures[0]}
style={[{marginRight:2},styles.imageStyle]}
/>
<ImageView
image={item.pictures[1]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
<View style={{flexDirection:'row',marginTop:2}}>
<ImageView
style={[{marginRight:2},styles.imageStyle]}
image={item.pictures[2]}
/>
<ImageView
image={item.pictures[3]}
style={[{marginLeft:2},styles.imageStyle]}
/>
</View>
</View>
<View>
<TextViewNonClickable
textViewText={item.name}
/>
<TextViewNonClickable
textViewText={item.description}
/>
</View>
<MenuProvider>
<Menu style={{position:'absolute',top:8,right:8}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions >
<MenuOption >
<Text >edit</Text>
</MenuOption>
<MenuOption>
<Text >delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>
</View>
</TouchableOpacity>
)
}

Please pass customStyles as a prop to MenuOptions and MenuOption.
<MenuOptions optionsContainerStyle={{width:100,height:60}}>
<MenuOption customStyles={{width:100,height:30}}/>
</MenuOptions>

I have done it,but i could not show menus overs the text
and here is my new code :-
<MenuProvider>
<Menu style={{position:'absolute',top:0,right:0}}>
<MenuTrigger >
<Icon
name = 'more-vertical'
type = 'feather'
color = {color.colorWhite}
iconStyle={{padding:12}}
size={24}
/>
</MenuTrigger>
<MenuOptions optionsContainerStyle=
{{paddingLeft:8,height:96,width:100}}>
<MenuOption customStyles={{height:48,width:100}}>
<Text
style={{fontWeight:'bold',paddingTop:8}}
onPress={() =>
this.openAddOrUpdateModal('update',item)}
>edit</Text>
</MenuOption>
<MenuOption customStyles={{height:48,width:100}}>
<Text style=
{{fontWeight:'bold',paddingTop:8}}>delete</Text>
</MenuOption>
</MenuOptions>
</Menu>
</MenuProvider>

Navigate to another stack navigator screen from a view not in the navigator

So I've got a view that contains both a stack navigator and a view at the bottom. The view at the bottom serves as a footer. Currently I'm trying to use a reference to the stack navigator but its not working. How do I trigger a screen navigation in the StackNavigator view from the footer view?
render() {
return (
<View style={styles.container}>
/*This is the Stack Navigator*/
<myNavigator.StackNavigation ref={(c)=>{this._stacky = c}} screenProps={{setNowPlaying:this.setNowPlaying.bind(this),
globalState:this.state,
showFooterPlayer:this.showFooterPlayer.bind(this),
playPauseSong:this.playPauseSong.bind(this),
seekToPosition:this.seekToPosition.bind(this)}}/>
/*This is the footer section*/
<TouchableOpacity onPress={()=>{console.log(this._stacky); this._stacky.navigation.navigate('Player')}} style={[styles.bottomFooterContainer, {height:this.state.showFooterPlayer?60: 0}]}>
<Image style={styles.headerImage} source={{uri:this.state.nowPlaying.image}} resizeMode="cover" />
<View style={styles.playerRight}>
<Text style={styles.songTitle} ellipsizeMode="tail" numberOfLines={1}>{this.state.nowPlaying.title}</Text>
{/* <Text style={styles.songTitle}>{counter}</Text> */}
<View style={styles.controlButtonsContainer}>
<TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/previous.png')} resizeMode="cover" /></TouchableOpacity>
<TouchableOpacity onPress={this.playPauseSong}><Image style={styles.controlButton} source={this.state.isPlaying?pauseImage: playImage} resizeMode="cover" /></TouchableOpacity>
<TouchableOpacity><Image style={styles.controlButton} source={require('./app/images/next.png')} resizeMode="cover" /></TouchableOpacity>
</View>
</View>
</TouchableOpacity>
</View>
);
}