Image for post
Image for post

Creating a Modal to display an alert in another screen with React Native

Using functional components and Expo!

Setting up Expo

yarn add react-navigation react-navigation-stack @react-native-community/masked-view expo react-native-gesture-handler react-native-reanimated react-native-screens

Setting up our folder structure

Image for post
Image for post
How we are setting up our folders with its files

Navigation Setup

import React from 'react';
import Navigator from './navigation/Navigator';
import { enableScreens } from 'react-native-screens';
// using this will will optimize usage and performance
enableScreens();
export default function App() {
return (
<Navigator />
);
};
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import MainScreen from '../screens/MainScreen';
import SecondScreen from '../screens/SecondScreen';
const MainStackNavigator = createStackNavigator({
Main: {
screen: MainScreen,
navigationOptions: () => ({
title: 'Main Screen'
})
},
Second: {
screen: SecondScreen,
navigationOptions: () => ({
title: 'Second Screen'
})
}
});
export default createAppContainer(MainStackNavigator);

Setting up our Screens

// MainScreen.jsimport React from 'react';
import { View, StyleSheet, Button } from 'react-native';
const MainScreen = props => {
return(
<View style={styles.container}>
<Button
color='white'
title='Go to second screen'
onPress={ () => props.navigation.navigate('Second')}/>
</View>
)
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'gray',
alignItems: 'center', justifyContent: 'center'
}
});
export default MainScreen;
// SecondScreen.jsimport React from 'react';
import { View, StyleSheet, Button } from 'react-native';

const SecondScreen = props => {
return (
<View style={styles.container}>
<Button color='white'
title='Show Modal on Main Screen'
onPress={ () => props.navigation.navigate('Main')} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'gray',
alignItems: 'center', justifyContent: 'center'
}
});
export default SecondScreen;
Image for post
Image for post

Customizing our Modal Component

// CustomModal.jsimport React from 'react';
import { Modal, StyleSheet, Text, View} from 'react-native';
const CustomModal = ({ title, isVisible }) => {return (<View style={styles.modalContainer}>
<Modal animationType='fade' transparent={true} visible {isVisible}>
<View style={styles.modalContainer}>
<View style={styles.modalView}>
<Text style={styles.textStyle}>{title}</Text>
</View>
</View>
</Modal>
</View>
);
};
const styles = StyleSheet.create({ modalContainer: {
alignItems: 'center',
position: 'absolute',
height: '100%', width: '100%',
},
modalView: {
flexDirection: 'row',
justifyContent: 'flex-start', alignItems: 'center',
top: 100,
width: '85%', height: 50,
backgroundColor: 'black',
borderRadius: 8
},
textStyle: {
color: 'white',
textAlign: 'center',
fontSize: 24,
marginLeft: 20
}
});
export default CustomModal;
// MainScreen.jsimport React, {useState} from 'react';
import { View, StyleSheet, Button } from 'react-native';
import CustomModal from '../components/CustomModal';const MainScreen = props => {const [isModalVisible, setModalVisible] = useState(true); return(
<View style={styles.container}>
<CustomModal title='Success!' isVisible {isModalVisible}/>
<Button
color='white'
title='Go to second screen'
onPress={ () => props.navigation.navigate('Second')}/>
</View>
)
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'gray',
alignItems: 'center', justifyContent: 'center'
}
});
export default MainScreen;
Image for post
Image for post
Our custom modal is now at the top of the screen!

Showing the Modal then dismissing it automatically

// SecondScreen.jsimport React from 'react';
import { View, StyleSheet, Button } from 'react-native';
const SecondScreen = props => {const showModalToMainScreen = () => {
props.navigation.navigate('Main', { showModal: true })
}
return (
<View style={styles.container}>
<Button color='white'
title='Show Modal on Main Screen'
onPress={ () => showModalToMainScreen() />
</View>
);
};
* rest of code remains the same *
// MainScreen.jsimport React, {useState, useEffect } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import CustomModal from '../components/CustomModal';
const MainScreen = props => {const [isModalVisible, setModalVisible] = useState(true);useEffect( () => { const listener = props.navigation.addListener('didFocus', () => { if (props.navigation.getParam('showModal')) {
toggleModal();
props.navigation.setParams({ showModal: false });
}
});
return () => {
listener.remove();
};
}, [props.navigation.getParam('showModal')]);const toggleModal = () => {
setModalVisible(true);
setTimeout( () => {
setModalVisible(false);
}, 3000)
};
* rest of code remains the same *
Image for post
Image for post
Ayeeee! The Modal fades in and out!

Bonus: Adding a Lottie Animation

Image for post
Image for post

Happy Holidays!

Down to earth & passionate iOS Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store