calculator-app's Issues
Color Scheme Matching
We can implement the dark mode with useColorScheme hook from react native. This was my test case:
Colors.js
export default {
light: {
text: "#000",
background: "#FFF",
},
dark: {
text: "#FFF",
background: "#000",
},
};
App.js
import React from "react";
import {
SafeAreaView,
Text,
StyleSheet,
StatusBar,
useColorScheme,
} from "react-native";
import Colors from "./Colors";
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#011",
},
text: {
color: "#FFF",
fontSize: 24,
},
});
export default function App() {
const colorScheme = useColorScheme();
return (
<>
<SafeAreaView
style={[
styles.container,
{ backgroundColor: Colors[colorScheme].background },
]}
>
<StatusBar
barStyle={colorScheme === "dark" ? "light-content" : "dark-content"}
backgroundColor={Colors[colorScheme].background}
/>
<Text style={[styles.text, { color: Colors[colorScheme].text }]}>
What time is it?
</Text>
</SafeAreaView>
</>
);
}
It works on my own end and toggles the background, text color and status bar background.
So applying to the calculator would be to change the background, button color, the different button colors and the result display text colors as well.
I could work on it today if you don't mind, mate.
AC / C style refactoring
Try something like this instead:
text={value1 ? AC : C}
...rather than creating a different state for AC. You use the state value1.
Orientation Layout
Hey, Tunji.
Here is the POC for orientation change. First, remove "orientation": "portrait" from app.json.
App.js
import React, { useState, useEffect } from "react";
import { View, Text, StyleSheet, StatusBar, Dimensions } from "react-native";
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#011",
},
text: {
color: "#FFF",
fontSize: 24,
},
});
export default function App() {
const [orientation, setOrientation] = useState("portrait");
//controlling the orientation change
useEffect(() => {
const subscription = Dimensions.addEventListener("change", () => {
const { width, height } = Dimensions.get("window");
let newOrientation = width > height ? "landscape" : "portrait";
setOrientation(newOrientation);
});
//this replaces the dependencies array. Saw this on RN docs
return () => subscription?.remove();
});
//portrait view (default)
function renderPortrait() {
return (
<View style={styles.container}>
<Text style={styles.text}>This is portrait text</Text>
</View>
);
}
//landscape view with lime bg just to show the difference.
function renderLandscape() {
return (
<View style={[styles.container, { backgroundColor: "lime" }]}>
<Text style={styles.text}>This is landscape text</Text>
</View>
);
}
//view variable
let view = orientation === "portrait" ? renderPortrait() : renderLandscape();
return (
<View style={{ flex: 1 }}>
<StatusBar hidden />
{view}
</View>
);
}
If you have the time, I want you to help me with the landscape layout. I have sent my phone's landscape layout for reference. I don't think iOS' default calculator has a landscape view (I'm not sure). Just go to app.json and change the "orientation" to "landscape" so that you can build it easily.
Once you're done, I can assist to implement the orientation listener from the code snippet above.
Let me know what you think.
Cheers.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.