Blog

Create a button component : Part 9

January 3, 2019/ stw / Javascript frameworks, Reactnative / 0 comments

To create a button component we will add new file in common folder of src. Button.js

We will import React and Component from react and

Text and TouchableOpacity from react-native

Touchable opacity so some animation on press so we will use this and later we will call onPress funtion to navigate on another page to view video.

So create Button.js file with this code

1. import React, { Component } from ‘react’;
2. import { Text, TouchableOpacity } from ‘react-native’;
4. class Button extends Component {
5. render() {
6. return (
7. <TouchableOpacity>
8. <Text>View</Text>
9. </TouchableOpacity>
10. );
11. }
12. }
13. export default Button;

Now our button code is ready and we will call this button in VideoList helper fuction where we are calling video id in place of button

So open VideoList.js

Import button component import Button from ‘../common/Button’;

Go to last CardInner component of helper function renderthumbnails() and replace Text with Button component

Now refresh simulator and you will see view text there which we were added in Button component

Now we are going to process button design so open Button.js and add some styling

Styling of Button component

1. const styles = {
3. buttonstyles: {
4. flex: 1,
5. alignSelf: ‘stretch’,
6. borderRadius: 4,
7. borderColor: ‘#000’,
8. borderWidth: 1,
9. backgroundColor: ‘#ff0000’
10. },
11. buttonTextstyle: {
12. fontSize: 16,
13. color: ‘#FFF’,
14. paddingTop: 10,
15. paddingBottom: 10,
16. alignSelf: ‘center’,
17. fontWeight: ‘600’
18. }
20. };

Now call these styles in TouchableOpacity and Text of Button component

1. return (
2. <TouchableOpacity style={styles.buttonstyles}>
3. <Text style={styles.buttonTextstyle}>View</Text>
4. </TouchableOpacity>
5. );

Now refresh simulator and you will see button style is changed to red

Now we need to pass Button pass a props when Button component is pressed . When we press button then a props should be pass to TouchableOpacity on press. Button component press will not work on press until we add press function on TouchableOpacity so

So add

1. <TouchableOpacity onPress={this.props.onPress} style={styles.buttonstyles}>
2. <Text style={styles.buttonTextstyle}>View</Text>
3. </TouchableOpacity>

Now we can make button text more editable so anyone can easily change where they call <Button /> component so we will add children same as we did for Cards components

1. <TouchableOpacity onPress={this.props.onPress} style={styles.buttonstyles}>
2. <Text style={styles.buttonTextstyle}>{this.props.children}</Text>
3. </TouchableOpacity>

So now button can be called with desired button text like this

<Button> Button Text Here </Button>

So Open VideoList.js and change button like this

<Button>

View

</Button>

Now please reload Simulator and check design

So page is ready to display with all video listing. In further process i am going to use navigation to play video on new page with id.