APP DEVELOPMENT REVIEWER

Core Components and Native Components

 Views and mobile development

 Native Components
 Core Components

React Fundamentals

 Custom Components
 Props
 State

React Native

- Is an open source framework for building Android and iOS applications using REACT
- Uses JavaScript

React Components

- Bundles of reusable
- Nestable code

View

- Is the basic building block of UI

- a small rectangular element on the screen which can be used to display text, images, or respond to user input

Kinds of views

- line of text or button

Kotlin or Java

- writing views for Android Development

Swift or Objective-C

- writing views for Ios Development

Core Components

REACT NATIVE UI ANDROID VIEW IOS VIEW WEB ANALOG DESCRIPTION

COMPONENT
<View> <ViewGroup> <UIView> A non-scrolling A container that
<div> supports layout with
flexbox, style, some
touch handling, and
accessibility controls
<Text> <TextView> <UITextView> <p> Displays, styles, and
nests strings of text
and even handles
touch events
<Image> <ImageView> <UIImageView> <img> Displays different
types of images
<ScrollView> <ScrollView> <UIScrollView> <div> A generic scrolling
container that can
 contain multiple
components and
views
<TextInput> <EditText> <UITextField> <input type=”text”> Allows the user to
enter text

React

- a popular open source library for building user interfaces with Javascript

Core Components behind React

- components
- JSX
- Props
- State

TextInput

- Is a core component that allows the user to enter text.

onChangeText

- prop that takes a function to be called every time the text changed

onSubmitEditing

- prop that takes a function to be called when the text is submitted.

ScrollView

- is a generic scrolling container that can contain multiple components and views
- The scrollable items can be heterogeneous, and you can scroll both vertically and horizontally (by setting the
horizontal property).
- can be configured to allow paging through views using swiping gestures by using the pagingEnabled props.
- Swiping horizontally between views can also be implemented on Android using the ViewPager component.
- On iOS a ScrollView with a single item can be used to allow the user to zoom content. Set up the
maximumZoomScale and minimumZoomScale props and your user will be able to use pinch and expand gestures
to zoom in and out.
- If you have a long list of items which cannot fit on the screen, you should use a FlatList.

React Native provides a suite of components for presenting lists of data. Generally, you'll want to use either FlatList or
SectionList.

FlatList

- component displays a scrolling list of changing, but similarly structured, data. FlatList works well for long lists of
data, where the number of items might change over time
- FlatList only renders elements that are currently showing on the screen, not all the elements at once.

Two props of FlatList

 Data
 renderItem
Data is the source of information for the list.

renderItem takes one item from the source and returns a formatted component to render.

If you want to render a set of data broken into logical sections, maybe with section headers, similar to UITableViews on
iOS, then a SectionList is the way to go.

<SectionList

sections={[

{title: 'D', data: ['Devin', 'Dan', 'Dominic']},

title: 'J',

data: [

'Jackson',

'James',

'Jillian',

'Jimmy',

'Joel',

'John',

'Julie',

],

},

]}

renderItem={({item}) => <Text style={styles.item}>{item}</Text>}

renderSectionHeader={({section}) => (

<Text style={styles.sectionHeader}>{section.title}</Text>

)}

keyExtractor={item => `basicListEntry-${item}`}

/>

React Native Styling

• Inline Styles: Using inline styles is preferred only for small very small components. For large-scale production
applications, it becomes cumbersome and inefficient to use inline styles.

• Ex. <View style={{ height: 550, margin: 20 }}>

• StyleSheet: As a component grows in complexity, it is much cleaner and efficient to use StyleSheet.create to
define several styles in one place.

• Ex. const styles = StyleSheet.create({

 container: {

height: 550, margin: 20

})

React Native State

• useState: This is a React Hook that lets you add a state variable to your component. It is used to control a
component’s behavior. The useState hook takes a single argument, the initial state, and returns an array
containing two elements: the current state and a function to update the state.

• Ex. const [email, setEmail] = useState(“”)

• useEffect: This is a React Hook that lets you synchronize a component with an external system. It is used to
perform side effects in a React Native’s functional component. Examples of side effects include fetching data
from an external API, manipulating the DOM, and adding timers. The useEffect hook takes two arguments: a
callback function and an optional array of dependencies.

• Ex. useEffect(() => {}, [])