React native: Change selected item color

Related searches

My drawer navigation is a stack navigation, that mean I creat a custom drawer as a stack navigation like that:

class DrawerComponent extends React.Component {

  navigateToScreen = (route) => (
  () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
});


  render() {

    return (
          <ScrollView style={Styles.containerDrawer}>
            <View style={Styles.logoContainer}>
              <Image source={Images.logo}
                style={Styles.imageStyle}
                resizeMode={'contain'}
              />
            </View>

            <View style={Styles.blocksContainer}>
              <View style={Styles.firstBlock}>
                <TouchableOpacity
                  style={[Styles.buttonMenue, Styles.elevationButton, Styles.bgButton, Styles.centerContent]}
                  onPress= {this.navigateToScreen('Messages')}
                >
                  <IconMCI
                    name="message-text-outline" size={wp('10%')} color= '#000'
                    style={Styles.iconStyle}
                  />
                  <Text style={Styles.textButton}>الرسائل</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[Styles.buttonMenue, Styles.elevationButton, Styles.bgButton, Styles.centerContent]}
                  onPress= {this.navigateToScreen('Home')}
                >
                  <IconSI
                    name="home" size={wp('10%')} color= '#000'
                    style={Styles.iconStyle}
                  />
                  <Text style={Styles.textButton}>الإستقبال</Text>

                </TouchableOpacity>
              </View>

My problem is that I can't change style of selected Item.

this is my drawer, it's look like this:

You could use states for handling click event for item and change class based on it, a sample example is provided below

    class DrawerComponent extends React.Component {

      state={
      clicked:true;
      }

      navigateToScreen = (route) => (
      () => {
        const navigateAction = NavigationActions.navigate({
          routeName: route
        });
        this.props.navigation.dispatch(navigateAction);
    });


      render() {

        return (
             ...

                <View style={Styles.blocksContainer}>
                  <View style={Styles.firstBlock}>
                    <TouchableOpacity
                      style={!this.state.clicked?[Styles.buttonMenue, Styles.elevationButton, Styles.bgButton, Styles.centerContent]:['custom-style']}
                      onPress= {()=>{
    this.setState({clicked:true})
    this.navigateToScreen('Messages')
    }}
                    >
 ...
                    </TouchableOpacity>

                  </View>

Ask - How to change the color style in Picker? � Issue #338 , Hello, So I am using Picker component and try this code import React, { Component } { Container, Content, Picker } from 'native-base'; const Item = Picker. the selected item color setting an style={{ color: '#ffffff' }} to the Picker. Contents in this project Set Text Color in React Native : Start a fresh React Native project. If you don’t know how then read my this tutorial. Add StyleSheet, View and Text component in import block. Add View tag in render’s return block. Add inline style in View to make the all the Text component items align center.

this is more informations:

import React, {Component} from 'react';
import { createStackNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';
import HomeStackNavigation from './HomeStackNavigation'
import Messages from '../Components/Messages/Messages';
import DrawerComponent from '../Components/Drawer/Drawer';
import {Platform, Dimensions} from 'react-native';
// import ScoreList from '../Components/ScoreList/ScoreList';

var width = Dimensions.get('window').width;

const DrawerNavigation = createDrawerNavigator({
    Home: { // entree (route name) : on peut la nommer comme on veut mais on prefere lui donner le meme nom que notre screen qu'on va afficher
      screen: HomeStackNavigation, // le screen qu'on va afficher IL DOIT ETRE UN STACK
    },
},
{
  drawerWidth: width*0.83,
  contentComponent: props =>
  {
    return(<DrawerComponent  {...props}/>)
  },
  drawerPosition: 'left',
},
);

export default createAppContainer(DrawerNavigation)

react-Native Change color on selected item in flatlist, react-Native Change color on selected item in flatlist - android. I have a flat list that renders several buttons, I want to mark the selected button inside esee flat� Selected Items in a list. What we have here is a screen with selected items highlighted in a bright color whereas the other items in the list are set to have default styling. In order to understand the logic more clearly let’s look into the fetch component

this.props.activeItemKey inside your render method will give you the current item key like Messages, or Home in your case ... you could use to style the active item accordingly.

Second

If possible move your screens that your StackNavigator renders in the routeConfigs to your Drawer instead:

const DrawerNavigation = createDrawerNavigator({
  Home: { screen: HomeScreen },
  Screen2: { screen: StackScreen2 },
  Screen3: { screen: StackScreen3 },
});

How can i change the FlatList item background color when button is , How can i change the FlatList item background color when button is pressed in React screen), how can i set the background color to green in the row selected ? React Native iOS - FlatList: click on any item in the list and show an alert. I currently have the same issue on iOS and seems selected item has a fixed color of rgb(0,0,0) which is also the color of my background color of my application. Any hack or fix would be appreciated as itemStyle prop seems to have no effect on Picker Items.

React Native Sectioned Multi Select, Before installing, please make sure you have react-native-vector-icons set up. SectionedMultiSelect from 'react-native-sectioned-multi-select'; const items disabled, #d7d7d7, Selected icon color for sub items when highlight children is� onValueChange. Callback for when an item is selected. This is called with the following parameters: itemValue: the value prop of the item that was selected; itemPosition: the index of the selected item in this picker

How to Highlight and Multi-Select Items in a FlatList , It is a component which came into existence in React native after the a bright color, whereas the other items in the list are set to have default� I do not understand why the downvotes. Does this not work for a majority of people? Here are some screenshots where I use this style to effectively change the font size of my <Picker.Item>, the last one is iOS.

Colors – React Native’s Color Reference property set will allow you to alter colors – you can customize colors using red-green-blue notation, change hue or saturation, and more 2.1 Class Names Each style object has a name, referred to as the object’s class name.

Comments
  • Great! .. the code in my answer will work perfectly ... since you're passing your DrawerComponent as the contentComponent ... try to console.log this.props.activeItemKey in your render method for testing
  • I have 'home' when I console.log it !! I think it's because of this : const DrawerNavigation = createDrawerNavigator({ Home: screen: HomeStackNavigation, }, },
  • I think it works if I have Items in drawernavigation config but I have juve one stackNavigation
  • please share more about your navigation setup (specially where and how you render your drawer) for the pic to be more clear...
  • But if do that I can't navigate from drawer to my screens because my items in costum drawer it's just touchableOpacity buttons
  • your navigateToScreen in your code did the job perfectly