MOBILE APPLICATION

DEVELOPMENT
BCS-6/BSE – 5
Instructor Name:Aatiqa Bint e Ghazali
Touchable opacity
Image
Background Image
React Navigation
 TOUCHABLEOPACITY

• A wrapper for making views respond properly to touches.

• On press down, the opacity of the wrapped view is decreased, dimming it.
• Opacity is controlled by wrapping the children in an Animated.View,
which is added to the view hierarchy.
• Be aware that this can affect layout.
 TOUCHABLEOPACITY

• Import touchableopacity from react-native

• Wrap a text inside it
• Style the opacity
• Attach an onPress handler with it
• Boom you just made your touchable feature more responsive
EXAMPLE CODE
OUTPUT
 ADDING AN IMAGE IN REACT
NATIVE APP
• A React component for displaying different types of images, including
network images, static resources, temporary local images, and images
from local disk, such as the camera roll.
• Like other core components import images from react native and use it
• You need to assign width and height to image in styles
• Attach the source of image using source ={{ uri : ‘’}}
• Or
• Source={require(‘./assets/favicon.png’) }
EXAMPLE CODE
 IMAGE BACKGROUND
• Have same props like IMAGE
• Used to set background image
• <ImageBackground source={image} resizeMode="cover"}>
• </ImageBackground>
EXAMPLE
 CLASS ACTIVITY
• Make something like this in react native
 SWITCH
• Renders a boolean input.
• This is a controlled component that requires an onValueChange callback
that updates the value prop in order for the component to reflect user
actions.
• If the value prop is not updated, the component will continue to render
the supplied value prop instead of the expected result of any user
actions.
EXAMPLE CODE
 STATUSBAR

• Component to control the app's status bar.

• The status bar is the zone, typically at the top of the screen, that displays
the current time, Wi-Fi and cellular network information, battery level
and/or other status icons.
• This component has several other properties that can be used. Some of
them are Android or IOS specific. You can check it in official
documentation.
• The hidden property can be used to hide the status bar.
• The barStyle can have three values – dark-content, light-
content and default.
BACKGROUND IMAGE
 NAVIGATION
• Now that we have covered how to display certain elements on a screen
and we are able to make pretty decent screens lets jump on towards
navigating between different screens
 HOW TO NAVIGATE BETWEEN
SCREENS
• You need to use third-party navigation tools and configure them in your
app to be able to move between different screens
• For this course, we will be using react navigation
• https://reactnavigation.org/docs/
 GETTING STARTED
• First of all install this basic package :
• npm install @react-navigation/native
• Let's also install and configure dependencies used by most navigators,
then we can move forward with starting to write some code.
• npx expo install react-native-screens react-native-safe-area-
context
• If you're on a Mac and developing for iOS, you need to install the pods
(via Cocoapods) to complete the linking.
• npx pod-install ios
 WRAPPING YOUR APP IN
NAVIGATIONCONTAINER
• Now, we need to wrap the whole app in NavigationContainer.
• Usually you'd do this in your entry file, such as index.js or App.js:
• First import NavigationContainer and then wrap as shown below:
 REACT NAVIGATION'S NATIVE
STACK
• React Navigation's native stack navigator provides a way for your app to
transition between screens and manage navigation history.
• The libraries we've installed so far are the building blocks and shared
foundations for navigators, and each navigator in React Navigation
lives in its own library.
• To use the native stack navigator, we need to install
• @react-navigation/native-stack
• npm install @react-navigation/native-stack
 CREATING A NATIVE STACK
NAVIGATOR
• createNativeStackNavigator is a function that returns an object
containing 2 properties: Screen and Navigator.
• Both of them are React components used for configuring the navigator.
• The Navigator should contain Screen elements as its children to define the
configuration for routes.
• So first import createNativeStackNavigator from
'@react-navigation/native-stack
• Then create a variable and call this function
• const Stack = createNativeStackNavigator();
 CREATING A NATIVE STACK
NAVIGATOR
• As discussed previously this function of stack return two 2 properties so lets
use it
• <Stack.Navigator> should be wrapped around screens among which we
need to navigate
• <Stack.Screen> the links to screens
• So create a new folder screens and add two files home and details (fill with
some data like view and text.
• Move back to app.js
• <Stack.Screen name="Home" component={HomeScreen} />
• Here HomeScreen is the imported component you can add more
• The name “Home” and others is important
 LAST STEP
• The page from where you want to move to next page should contain
navigation keyword inside it’s parenthesis
• And onPress call a function and use navigation.navigate(‘move to
next page’)
 OVERALL PACKAGES THAT WE
HAVE INSTALLED
• npm install @react-navigation/native
• npx expo install react-native-screens react-native-safe-area-context
• npm install @react-navigation/native-stack
 THERE ARE MORE PROPERTIES
IN NAVIGATION
• We can also add drawer navigation using this
• We will discuss this later on
 ABOUT PROJECT
• Each group member should make 1 screen at-least and should be able to
explain it
• Start doing your project
• It should be able to save and retrieve data from firebase