Элемент в ящике не отражается на реакции родного?

Question

Я проектировал ящик. Когда я пытался выделить некоторое пространство между значком и текстом, а также другим значком, он не отражался в выводе.

Всякий раз, когда я меняю или добавляю стиль, который не отражается в приложении, также мне просто нужно равное пространство между всеми текстами и иконками. Любая помощь будет оценена.

import React, {Component} from "react";
import { connect } from 'react-redux';
import {ImageBackground, Platform, StyleSheet, BackHandler,View, TouchableHighlight} from "react-native";
// import { Ionicons } from '@expo/vector-icons';
import {
    Container,
    Header,
    Body,
    Title,
    Left,
    Right,
    Content,
    Button,
    Text,
    Card,
    Form,
    Item,
    Input,
    Label,
    Icon,
    Toast,
    Separator,
    List,
    ListItem
} from 'native-base';
import FastImage from 'react-native-fast-image';
import { Col, Row, Grid } from 'react-native-easy-grid';
// import { Col, Row, Grid } from "react-native-easy-grid"; import AppNavigator
// from './navigation/AppNavigator'; const splash =
// require("./assets/images/splash.png ");
import { Actions } from 'react-native-router-flux';
const redirectToMembers = () =>{
    Actions.members()
 }
 const routes = ["Home", "Chat", "Profile"];

// Activity subMenu 
 const ActivityMenu = (<View>
    <ListItem>
        <TouchableHighlight>
         <Text>Sent me a Smile</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Chat Received</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Added me to Favorites</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Viewd my Profile</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Notifications Sent</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Sent a Smile to them</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Chat Sent</Text>
        </TouchableHighlight>
    </ListItem>
  </View>)
//   end

// Search Sub Menu
const SearchMenu = (<View>
    <ListItem>
        <TouchableHighlight>
         <Text>Active Members</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Advanced Searches</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Basic Searches</Text>
        </TouchableHighlight>
    </ListItem>
    <ListItem>
        <TouchableHighlight>
         <Text>Horoscope Searches</Text>
        </TouchableHighlight>
    </ListItem>
  </View>)
// end

class SidebarScreen extends Component {

    constructor(props) {
        super(props);
        this.state = { activityItem: false, searchItem: false};
      }

    _logout = () => {
        // AsyncStorage.removeItem('userToken');
        // let userToken = {};
        // this.props.login(userToken);
        // Actions.login();
        BackHandler.exitApp();
    }

    
    render() {
        return (
            <Container>
                <View style={{ backgroundColor: '#AC1319', height: 40 }}>
                    <Grid>
                        <Col>
                        </Col>
                        <Col size={4}>
                            <FastImage
                                style={{
                                    width: '100%',
                                    height: 42,
                                }}
                                grounded
                                source={require('../assets/images/logo2.png')}
                                resizeMode={FastImage.resizeMode.contain} />
                        </Col>
                        <Col>
                        </Col>
                    </Grid>
                </View>
                <View style={{flex:1}}>

            <List>
                        <ListItem>
                            <TouchableHighlight  onPress={() => Actions.upload({redirectToMembers})}>
                               <Text>
                                 <Icon name='home' style={styles.leftIcon} />
                                 Home
                               </Text> 
                            </TouchableHighlight>
                        </ListItem>
                        <ListItem>
                            <TouchableHighlight onPress={() => Actions.results({
                                resultType:'favorites'
                            })}>
                             <Text>
                                <Icon name='message1' type="AntDesign" style={styles.leftIcon} />
                                Message
                             </Text>
                            </TouchableHighlight>
                        </ListItem>
                        <ListItem>
                            <TouchableHighlight onPress={() => this.setState({ activityItem: !this.state.activityItem })}>
                             <Text>
                                <Icon name='clockcircleo' type="AntDesign" style={styles.leftIcon} />
                                Activity
                                <Icon name={this.state.searchItem?"up":"down"} type="AntDesign" style={styles.RightIcon}/>
                             </Text>
                            </TouchableHighlight>
                        </ListItem>
                        {this.state.activityItem ? ActivityMenu : null}
                        <ListItem>
                            <TouchableHighlight>
                               <Text> 
                                   <Icon name='search' type="FontAwesome" style={styles.leftIcon}/>
                                  Search
                                  </Text>
                                
                            </TouchableHighlight>
                        </ListItem>
                       
                        <ListItem>
                            <TouchableHighlight onPress={() => this.setState({ searchItem: !this.state.searchItem })}>
                             <Text>
                                <Icon name='search-plus' type="FontAwesome" style={styles.leftIcon}/>
                                Popular Searches
                                <Icon name={this.state.searchItem?"up":"down"} type="AntDesign" style={styles.RightIcon}/>
                            </Text>
                            </TouchableHighlight>
                        </ListItem>
                        {this.state.searchItem ? SearchMenu : null}
                        <ListItem>
                            <TouchableHighlight>
                             <Text>
                                <Icon name='profile' type="AntDesign" style={styles.leftIcon}/>
                                My Profile
                             </Text>
                            </TouchableHighlight>
                        </ListItem>
                        <ListItem>
                            <TouchableHighlight>
                              <Text>
                                <Icon name='setting' type="AntDesign" style={styles.leftIcon} />
                                Setting
                              </Text>
                            </TouchableHighlight>
                        </ListItem>
                        <ListItem>
                            <TouchableHighlight>
                             <Text>
                                <Icon name='infocirlceo' type="AntDesign" style={styles.leftIcon}/>
                                Help
                             </Text>  
                            </TouchableHighlight>
                        </ListItem>
                        <ListItem>
                            <TouchableHighlight>
                             <Text>
                                <Icon name='file1' type="AntDesign" style={styles.leftIcon}/>
                                Other Pages !
                             </Text> 
                            </TouchableHighlight>
                        </ListItem>
                        <ListItem>
                            <TouchableHighlight>
                             <Text>
                               <Icon name='globe' type="FontAwesome" style={styles.leftIcon}/>
                                Join Our Partner Sites
                             </Text>
                            </TouchableHighlight>
                        </ListItem>
                        
                        <ListItem last>
                            <TouchableHighlight Primary onPress={() => this._logout()}>
                                <Text><Icon name='close' /> CLOSE APP</Text>
                            </TouchableHighlight>
                        </ListItem>

                
          </List>

                <View style={{position:"absolute",bottom:0,left:0,width:'100%'}}>
                    <Button block large Primary style={{width:'100%'}}><Text>Upgrade!</Text></Button>
                </View>

                </View>
            </Container>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      },
    row: {
      flex: 1,
      justifyContent: "space-around"
    },
    button: {
      backgroundColor: 'blue',
      marginBottom: 10
    },
    text: {
      color: 'white',
      fontSize: 20,
      paddingLeft:20,
      paddingRight:20
    },
    leftIcon:{
        size:20,
        paddingLeft:20,
        paddingRight:40
    },
    RightIcon:{
        size:20,
        paddingLeft:40
    }
  });

  const mapStateToProps = state => ({
    user: state.user,
  });
const mapDispatchToProps = dispatch => {
    return {
      login:  (user) => dispatch({ type: 'LOGIN',user:user }),
      logout: () => dispatch({ type: 'LOGOUT' })
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(SidebarScreen);

O / p