Make professional mobile apps with React Native and Typescript — Animations (Chapter 3 — Part 7)

Photo by Irvan Smith on Unsplash
git clone -b internationalization https://github.com/thinhtran3588/react-native-starter-kit.git
yarn add @react-native-community/netinfo
internet_connection
export * from './internet_connection/internet_connection';
"noInternetConnection": "No Internet Connection",
"noInternetConnection": "Không có kết nối mạng",
app_layout
<AppLayout>
<AppLayout showInternetConnection>
ios animation 1
android animation 1
Animated.timing(animation, {  toValue: isConnected ? 0 : 80,  duration: 500,  useNativeDriver: true,}).start();
Animated.timing(animation, {  toValue: isConnected ? 0 : 40,  duration: 500,  useNativeDriver: false,}).start();
opacity: animation
height: animation
ios animation 2
android animation 2
import NetInfo from '@react-native-community/netinfo';
useEffect(() => {  const refresh = async (): Promise<void> => {    try {      const data = await weatherService.getDailyWeatherForecast({...conditions, lang});      setWeatherForecasts(data);    } catch (error) {      Alert.alert('Error', error.message);    }  };  refresh();  const unsubscribe = NetInfo.addEventListener((state) => {    if (state.isConnected && state.isInternetReachable !== false && weatherForecasts.length === 0) {      refresh();    }  });  return () => {    unsubscribe();  };}, [conditions, lang, weatherForecasts.length]);
yarn add react-native-animatable
import {View as AnimatableView} from 'react-native-animatable';
settings_screen
ios animation 3
android animation 3
yarn add lottie-react-native lottie-ios@3.1.3
loading.tsx
export * from './loading/loading';
loading screen
git clone -b animations https://github.com/thinhtran3588/react-native-starter-kit.git

--

--

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