Добавить
Уведомления

React Native Calculator With Switchable dark mode (with source code)

#ReactNative #Calculator #ReactnativeCalculator #nativeCalculator In this video, we'll make a fully functioning calculator using React Native and we are also going to implement the dark mode functionality source Code : https://github.com/SyedMohsinAliZaidi/ReactNativeSimpleCalculator Like and subscirbe and share follow me on instagram https://instagram.com/codingwithzaidi?igshid=1jdu9k0ayywu1 Css File and package name const styles = StyleSheet.create({ results: { backgroundColor: darkMode ? '#282f3b' : '#f5f5f5', maxWidth: '100%', minHeight: '35%', alignItems: 'flex-end', justifyContent: 'flex-end', }, resultText: { maxHeight: 45, color: '#FF6666', margin: 15, fontSize: 35, }, historyText: { color: darkMode ? '#B5B7BB' : '#7c7c7c', fontSize: 20, marginRight: 10, alignSelf: 'flex-end', }, themeButton: { alignSelf: 'flex-start', bottom: '5%', margin: 15, backgroundColor: darkMode ? '#7b8084' : '#e5e5e5', alignItems: 'center', justifyContent: 'center', width: 50, height: 50, borderRadius: 25, }, buttons: { width: '100%', height: '35%', flexDirection: 'row', flexWrap: 'wrap', }, button: { borderColor: darkMode ? '#3f4d5b' : '#e5e5e5', alignItems: 'center', justifyContent: 'center', minWidth: '24%', minHeight: '54%', flex: 2, }, textButton: { color: darkMode ? '#b5b7bb' : '#7c7c7c', fontSize: 28, } }) npm install react-native-vector-icons --save react-native link react-native link react-native-vector-icons

Иконка канала Реактивные Задачи
29 подписчиков
12+
16 просмотров
2 года назад
12+
16 просмотров
2 года назад

#ReactNative #Calculator #ReactnativeCalculator #nativeCalculator In this video, we'll make a fully functioning calculator using React Native and we are also going to implement the dark mode functionality source Code : https://github.com/SyedMohsinAliZaidi/ReactNativeSimpleCalculator Like and subscirbe and share follow me on instagram https://instagram.com/codingwithzaidi?igshid=1jdu9k0ayywu1 Css File and package name const styles = StyleSheet.create({ results: { backgroundColor: darkMode ? '#282f3b' : '#f5f5f5', maxWidth: '100%', minHeight: '35%', alignItems: 'flex-end', justifyContent: 'flex-end', }, resultText: { maxHeight: 45, color: '#FF6666', margin: 15, fontSize: 35, }, historyText: { color: darkMode ? '#B5B7BB' : '#7c7c7c', fontSize: 20, marginRight: 10, alignSelf: 'flex-end', }, themeButton: { alignSelf: 'flex-start', bottom: '5%', margin: 15, backgroundColor: darkMode ? '#7b8084' : '#e5e5e5', alignItems: 'center', justifyContent: 'center', width: 50, height: 50, borderRadius: 25, }, buttons: { width: '100%', height: '35%', flexDirection: 'row', flexWrap: 'wrap', }, button: { borderColor: darkMode ? '#3f4d5b' : '#e5e5e5', alignItems: 'center', justifyContent: 'center', minWidth: '24%', minHeight: '54%', flex: 2, }, textButton: { color: darkMode ? '#b5b7bb' : '#7c7c7c', fontSize: 28, } }) npm install react-native-vector-icons --save react-native link react-native link react-native-vector-icons

, чтобы оставлять комментарии