The newest and greatest Instant messaging app!!!
InstaChat is an app that allows you to have instant conversations and create custom chat rooms with a wide variety of topics.
- React Native
- Firebase
- Expo
- React Native Elements
- React Navigation
const LoginScreen = ({ navigation }) => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) => {
if(authUser) {
navigation.replace('Home')
}
})
return unsubscribe
}, [])
const signIn = () => {
auth.signInWithEmailAndPassword(email, password).catch((error) => alert(error))
}
return (
<KeyboardAvoidingView behavior='padding' style={styles.container}>
<StatusBar style="dark" />
<Image
source={require('./instachat-logo.png')}
style={{ width: 400, height: 200 }}
/>
<View style={styles.inputContainer}>
<Input placeholder='Email' autoFocus type="email" value={email} onChangeText={(text) => setEmail(text)} />
<Input placeholder='Password' secureTextEntry type="password" value={password} onChangeText={(text) => setPassword(text)} onSubmitEditing={signIn} />
</View>
<Button buttonStyle={styles.button} onPress={signIn} title="Login" />
<Button buttonStyle={styles.button} onPress={() => navigation.navigate("Register")} title="Register" />
<View style={{ height: 100 }} />
</KeyboardAvoidingView>
)
}
export default LoginScreen
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
padding: 10,
backgroundColor: "white",
},
inputContainer: {
width: 300,
},
button: {
width: 200,
marginTop: 10,
backgroundColor: "#8B0D32",
},
})
To-do list:
- Refactor code
- Add Private Chat Rooms
- Make Users Profile More Unigue
- Add More To Chat Functionality, things like Gifs, Pictures, Videos, Code Snippets.
Project functions as intended, Definitely room for improvement
My whole life I've always used some sort of messaging app to communicate with other so I wanted to see what it takes to create such a thing.
- Created by Brett Needham