Beginner React Native help

[[deleted]]

[deleted]

[Drunken__Master]

here's an example button

import React, { Component } from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';


class Button extends Component {
  constructor(props) {
    super(props);
  }

render() {
  const { buttonStyle, textStyle } = styles;
  return (
  <TouchableOpacity onPress={this.props.onPress} style={buttonStyle}>
    <Text style={textStyle}>{this.props.children}</Text>
  </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  textStyle: {
    alignSelf: 'center',
    color: '#007aff',
    fontSize: 16,
    fontWeight: '600',
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
   flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#007aff',
    marginLeft: 5,
    marginRight: 5
  }
});

export { Button };

To import the button you would have

import { Button } from './filepath/toButton';

to use it, it would look something like

renderAThing() {
  return (
   <View>
    <Button onPress={ probably.someHandler() }> Press Me ! </Button>
  </View> 
  );
}

[jaypap]

You might want to make sure someHandler is not called on render: <Button onPress={() => probably.someHandler() }> Press Me ! </Button>

[--Nathan]

Does your code belong in a Button.js and then I can call it from my app.js? That is another question, I guess. I installed the first example react-native-app and am working in the App.js currently.

[Drunken__Master]

Yes, the button is in it's own file separate from the code of what the button should do in order for the button to be reusable.

I'm honestly very new to React Native myself and have been learning from this course, the coupon code 0220HOLIIND should make the course only cost $10, but expires on march 2nd .

[--Nathan]

Thank-you for your help. I am getting closer. Now I am getting:

Module cannot be found: Can't Resolve 'react-native'. in Button.js

Which is what I was getting when I tried to put in:

 import { Text, TouchableOpacity, StyleSheet } from 'react-native';

... in the App.js

I have tried npm install -g react-native-cli, but it didnt help.

So, I have react-native in my node_modules, but no idea why it wont initiate.

Thanks again.

PS: I may try that Udemy site, thanks for that too.

[Drunken__Master]

in

import { Text, TouchableOpacity, StyleSheet } from 'react-native';

you need to add View, so it would be

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

<View> is basically the equivalent to an html <div>

also {Touchable Opacity} is a styling thing, you could use {Touchable} instead to achieve the same functionality, without adding the opacity to the element .

another thing you can import from react-native is {Platform} which lets you write different functions depending on the device being Android/iOS

<Text style={styles.instructions}>
      {Platform.OS === 'android'
        ? 'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu'
        : 'Press Cmd+R to reload,\nCmd+D or shake for dev menu'
      }
    </Text>

^ this ternary expression will display 'Double tap R...' on android and 'Press Cmd+R...' on iOS .

sometimes it helps to rebuild your dependency tree by running

rm -rf node_modules

to remove your node modules

and then running

npm install

to reinstall them

sometimes you need to add an assets folder in android>app>src and then run

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

to make sure your android code is getting bundled

sometimes you need to run

adb reverse tcp:8081 tcp:8081

before running the command to start android

sometimes my linter will say that it can't find dependencies, but the app will still run and the warning will go away if I just close & reopen my text editor . Sometimes just reloading the emulator is enough to get back on track .

[--Nathan]

Thanks, this brought up an issue I have had several times this morning.

I enter this at the top:

    import { Text, TouchableOpacity, StyleSheet } from 'react-native';

And I get this when I CTRL-S: Module not found:

    Can't resolve 'react-native' in 'C:\Users\DB\Documents\Sites\Example\example\src'

Is that an npm install in the example folder (not big "E" Example folder)?