CODEWITHSUNDEEP
react-native
tahaf10
tahaf10

Reputation: 198

React Native View not displaying anything

I followed the tutorial Here to set up a drawer navigator for my app and I'm doing pretty much everything the same as this guide mentions but my output is something like this

enter image description here

According to the guide though, and according to my code there should be text in the middle of the white empty screen. This makes me think that the View tag of my home file is not working or it's not rendering for some reason but the render function does get called though, i see the logs and the console.log inside the function does show up there, so I just can't figure out what the issue is here.

Here's my code:

Home.js

class Home extends Component{

render() {

    console.log("I AM HERE")

    return (
        <View style={styles.container}>
            <Text style={styles.text}>Home Page</Text>
        </View>

    )
}
}

styles = StyleSheet.create({

container: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center',
    marginTop: 50,
    justifyContent: 'center',
},
text: {

    fontSize: 50,
    color: 'red'
}
})

HomeRoute.js

  const ROUTES = createStackNavigator({
  [ROUTE_NAMES.HOME]: {
  screen: Home,
  navigationOptions: ({ navigation }) => ({
  title: 'Home',
  headerLeft: <SideDrawer navigationProps={navigation} />,
  headerStyle: {
    backgroundColor: '#FF9800',
  },
  headerTintColor: '#fff',
}),
},
});

const HOME_ROUTES = createAppContainer(ROUTES);

export default HOME_ROUTES;

SideDrawer.js

export default class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
  <View style={{ flexDirection: 'row' }}>
    <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
      {/*Donute Button Image */}
      <Image
        source={drawerImage}
        style={{ width: 25, height: 25, marginLeft: 5 }}
      />
    </TouchableOpacity>
  </View>
);
}
}

Upvotes: 1

Views: 6801

Answers (2)

morissetcl
morissetcl

Reputation: 564

Do you have an App.js file ? I don't see it in your post. If not, you should add the code below:

import React from 'react';
import { View } from 'react-native';
import HomeRoute from './your_path/HomeRoute.js';

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <HomeRoute/>
        <FlashMessage position="top" />
      </View>
    );
  }
}

Otherwise I will be curious to glance your App.js.

Upvotes: 2

user11869519
user11869519

Reputation:

There is quite a difference between CSS flexbox and the one implemented by Facebook. Lots of things in common but defaults are very different. Specifically:

Everything is displayed: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: attribute is only used when at the same level there are few components with different flex values (flex: 1, flex: 3) means that the second element should be 3 times bigger than the first one. flex attribute is the only one supported (no grow/shrink support).

More info: yoga

Upvotes: 4

Related Questions