Estoy tratando de usar Flatlist como Sidebar, pero se inicia solo después de hacer clic en él. ¿Hay alguna forma de que pueda hacer que el primer elemento de la lista plana sea el predeterminado? En otras palabras, el trabajo al hacer clic debería ocurrir antes de que se cargue la página, como en LifecycleHooks. También sugiérame si hay alguna forma de crear una barra lateral dinámicamente en lugar de usar Flatlist.

 <FlatList data={Object.keys(this.state.groups)} renderItem ={({ item, index }) => ( <TouchableOpacity onPress={() => { this.showDetails(item),this.setState({itemIndex:index}) }} // onPress={() => alert(item)} > {console.log(index,"index of cards",Object.keys(this.state.groups),"item index")} <View style={{width: 280, height:54 , flexDirection:"row",alignItems:"center",backgroundColor: (this.state.itemIndex === index) ? "#74C947" : "#F6F6F6"}}> {/* Use ExcludeIcon.svg for stop symbol*/} {(this.state.itemIndex === index) ? <Image source={require("../../../assets/images/WhiteTick.svg")} style={{width:16,height:11,marginLeft:15,marginRight:9}}/> : <Image source={require("../../../assets/images/GreenTick.svg")} style={{width:16,height:11,marginLeft:15,marginRight:9}}/> } <Text style={{ fontStyle:"normal", fontWeight:"500", fontSize: 16, color: (this.state.itemIndex === index) ? "#FFFFFF" : "#333333", textTransform:"capitalize" }}> {item} </Text> </View> </TouchableOpacity> ) } keyExtractor={item => item} />