Align 2 elements on same line in View causes unique key for child warning and element only partially visible

Question

In the app of react native 0.59, there is a list view of contact users with each line of checkbox and a segment tab for selection with style of flexDirection:'row'. Here is the render code:

import {CheckBox, View, StyleSheet } from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';


export default class NewGroupmember extends React.Component {
  ...
render() {
        return (
        <View style={styles.container}>
            {this.state.contacts.map((cb) => {
                            return (
                                <View style={{flexDirection:'row'}}>
                                <CheckBox
                                    key={cb.id}
                                    title={cb.contact_for.name}
                                    checked={cb._checked}
                                    onPress={() => this.toggleCheckbox(cb.id)} />
                                <SegmentedControlTab
                                    values={['messanger', 'eventer', 'admin']}
                                    selectedIndex={this.state.selectedIndex}
                                    onTabPress={this.handleIndexChange}
                                    tabsContainerStyle={styles.tabContainerStyle}
                                />
                                </View>
                                )
                            })}        
            <Button
            title='Save'
            onPress={this.save}
            />
        </View>
        )
    }

Here is the view displayed with only checkbox and no segment selection visible at all:

Also there is warning message of lacking unique key for child:

09-10 12:48:21.140  2088  2265 E ReactNativeJS: 'Warning: Each child in a list should have a unique "key" prop.%s%s See h-t-t-p-s:/-/-fb.me/react-warning-keys for more information.%s', '\n\nCheck the render method of `NewGroupmember`.', '', '\n    in View (at Newgroupmember.js:160)\n    in NewGroupmember (at App.js:146)\n    in NewGroupmemberWithSelf (at SceneView.js:9)\n    in SceneView (at StackViewLayout.tsx:888)\n    in RCTView (at View.js:45)\n    in View (at StackViewLayout.tsx:887)\n    in RCTView (at View.js:45)\n    in View (at StackViewLayout.tsx:886)\n    in RCTView (at View.js:45)\n    in View (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at StackViewCard.tsx:93)\n    in RCTView (at View.js:45)\n    in View (at createAnimatedComponent.js:151)\n    in AnimatedComponent (at screens.native.js:59)\n    in Screen (at StackViewCard.tsx:80)\n    in Card (at createPointerEventsContainer.tsx:95)\n

How to fix the style and the render code above?

Here is the code of style:

const styles = StyleSheet.create({
    input: {
    width: 350,
    height: 55,
    backgroundColor: '#42A5F5',
    margin: 10,
    padding: 8,
    color: 'white',
    borderRadius: 14,
    fontSize: 18,
    fontWeight: '500',
    },
    titleText:{
    fontSize: 20,
    fontWeight: 'bold',
    },
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
    }
})

Answer 1

<View style={styles.container}>
    <View style={{flexDirection:'row'}}>

      <View style={{flex: 5}}>      //add new view with flex 5
        <SegmentedControlTab
          values={['messenger', 'eventer', 'admin']}
          selectedIndex={this.state.selectedIndex}/>
      </View>                       //end new view

        <CheckBox
          style={{flex: 1}}       // add flex:1 style
          style={{}}
          title={"check box"}/>

    </View>
    <Button
      title='Save'
      onPress={this.save}
    />
  </View>

Regarding the warning message You need to add KEY in the upper VIEW in the loop

Answer 2

You just need to pass the index in your view so that all views become unique.

example:

  {this.state.contacts.map((cb, index) => {
                        return (
                            <View key={index} style={{flexDirection:'row'}}>

                            </View>
                            )
                        })}