How To React Native #1 - Buttons

Hey everyone! If you want to learn build a mobile app with React Native (ES,JS),
I will post tutorials like this. If these are useful to you, I'll continue.
In several days, I will post new Contribution why we learn React Native.
Keep in touch!

---

What Will I Learn?

• What is a button.
• How to import buttons in our projects.
• Buttons Props
• Complex Example

---

Requirements

• npm
• node.js
• Text/Code Editor (I prefer Atom)

---

Difficulty

• Intermediate

---

Tutorial Contents

• What is a button?

Buttons are capable of do stuff you want to do with a press.

• How to import buttons in our project?

import { Button } from 'react-native';

If you don't write this line, you can't use buttons in your project.

• Buttons Props

• title Required

You can write anything on button with this prop.
Example:

<Button
title="I am a button!"
/>

• onPress Required

This prop helps what is going to do when button pressed.
Example:
You have to import 'Alert' for that example!

<Button
onPress={() => Alert.alert('You clicked me!')}
title="Click me in Utopia!"
/>

• color

You can change text color on iOS or background color on Android with this prop.
Example:

<Button
title="I am something blue!"
color="blue"
/>

• disabled

This prop helps what is going to do when button pressed.
Example:

<Button
title="I am a disabled button!"
disabled={true}
/>

• testID

This prop helps if you want to access this button from anywhere.
Example:

<Button
title="Click me!"
testID="btn2"
/>

• accessibilityLabel

If a user has blindness accessibility this text shows up.
Example:

<Button
title="Click me!"
accessibilityLabel="If you click me, you will see an alert!"
/>

PS: I do not write required prop 'onPress' for don't make complicate in prop examples.

---

• Complex Example

We will try to build an app for change button color and title when pressed.
You have to know 'States', 'Alert', 'View' in React Native.

import React from 'react';
import {View, Button, Alert } from 'react-native';
export default class App extends React.Component {
  constructor(props) {
        super(props);
        this.state = { buttonColor:'blue',buttonText:'Change me to Red' };
      }
      changeButtonColor = () =>
      {
        if(this.state.buttonColor == 'blue')
        {
          this.setState({buttonColor:'red', buttonText:'Change me to Blue'});
        }
        else
        {
          this.setState({buttonColor:'blue', buttonText:'Change me to Red'});
        }
      }
  render() {
    return (
      <View style={{flex:1,alignItems: 'center',justifyContent: 'center'}}>
      
      
    );
  }
}

---

Documentation

React Native Documentation - Buttons

If you want to how to create a project in react native, you have to read this tutorial:
Create a React project using create-react-app

---

---

Posted on Utopian.io - Rewarding Open Source Contributors

---