My Private research takeaways on react-native
Hello
Today we create a custom button component on react-native
import React, { Component } from "react" ;
import PropTypes from "prop-types" ;
import { TouchableOpacity, Text } from "react-native" ;
First,
we must import React, as always, and we also must import Component, since
we’ll be extending that to make a new component.
The PropTypes module is something
we’ll require, in order to have custom properties available on our CustomButton.
Finally, to build a button, we’re going to use two other React Native components:
TouchableOpacity and Text.
TouchableOpacity allows us to create an area of the
screen that reacts to touch events and provides some visual feedback when it occurs via
a gradual opacity change.
class CustomButton extends Component {
render() {
const { text,onPress, buttonStyle, textStyle, width, disabled } = this.props;
}}
you can attach arbitrary props to a component you create without ill
effect, and the code inside the component can gain access to them through this.props.
However, that’s error-prone, because a user of your component won’t know what type a
given prop expects. That’s where something called propTypes comes in.
Here’s code
that comes after the render() method:
customButton.propTypes = {
text : PropTypes.string.isRequired, onPress : PropTypes.func.isRequired,
buttonStyle : PropTypes.object, textStyle : PropTypes.object,
width : PropTypes.string, disabled : PropTypes.string
};
You attach this propTypes attribute to your custom component, and within it,
you define each of the additional props your component supports, and for each, you
specify a function that will validate the prop.
Here, I’m using some existing validators
that the PropTypes module provides. This module provides quite a few validators, such
as string, array, bool, and number, just to name a few.
Also, some variants include
isRequired as well, so string.isRequired, for example as you see here, tells React
Native that the text prop must be present and must be a string.
This also
serves as a form of self-documentation, as the props that represent the API of the custom
component don’t have to be guessed; they’re well-defined, thanks to propTypes.
return(
style = {[
{ padding :10,
height :60,
borderRadius : 8,
margin :10,
width : width,
backgroundColor : disabled ! = null && disabled==="true" ? "#e0e0e0":
"#303656",
},
butttonStyle
]}
onPress ={ ()=> { if (disabled == null || disabled === "false"){
onPress() } } }
{ fontSize : 20, fontWeight : "bold", color : "#ffffff",
textAlign : "center", paddingTop : 8
},
] } >
{text}
);
}
}
This is the same basic idea as when we create a component: create a class that
extends from some component, here, the literal Component class, and build a render()
method
Our CustomButton is just a y component wrapped around a y component.
styling applied to the TouchableOpacity, to give it some
padding, static height, and rounded corner.
The final style attribute is backgroundColor, and here we use some logic to
determine whether the button should be grayed out (disabled is true) or should be blue
(active, disabled is false, or not supplied). Similar logic is used next in the onPress
prop, so that only an active button responds to touch.
the style attribute is a little different from anything
you’ve seen before, in that it seems to use array notation, as indicated by the use of
brackets.
Yes, you can apply multiple styles to a component in this way, and the point to
doing it here is so that the styles of the button can be overridden or customized further
by a developer using CustomButton, by supplying a buttonStyle prop.
same applies to the text prop
It’s not really a sophisticated piece of code by any stretch, but it shows quite a bit
about creating custom components
export the component.
export default CustomButton;
React Native will take care of adding CustomButton to its internal registry of
components when you import this module into another, which is what makes
work
<<<<<<<<<<<<<<>>>>>>>>>>>>>><<<<<<
CustomTextInput Custom Component
<><<<><><<>>>>><<<<<<>>>>>><><><><
import React, { Component} from "react";
import PropTypes from "prop-types";
import { Platform, StyleSheet, Text, TextInput, View } from "react-native";
Platform module will allow us to do some branching,
based on what OS the app is running on.
StyleSheet is, of course, how we’ll define a
stylesheet the component will use
The Text component will be necessary, so that we
can have a label attached to the TextInput, so that is also imported
We’re also going to
require a container for everything, and that’s where the View component comes in.
Wrap everything up in a view container and you are set
more posts will follow kindly leave your comments below
If you like my work consider donating to support this blog
Top comments (0)