How To React Native #1 - Buttons

[onurgule]

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'}}>
      
      
    );
  }
}

Reveal spoiler

---

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

---

Comments

[shreyasgune]

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

[utopian-io]

Hey @onurgule I am @utopian-io. I have just upvoted you!

Achievements

• You have less than 500 followers. Just gave you a gift to help you succeed!
• This is your first accepted contribution here in Utopian. Welcome!

Suggestions

• Contribute more often to get higher and higher rewards. I wish to see you often!
• Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

• Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

• Vote for my Witness With SteemConnect
• Proxy vote to Utopian Witness with SteemConnect
• Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x