My setup:
React-Native (0.73.9)
Expo (51.0.22)
Hey, I tried to use something similar to the todo example for react-native.
I ran the server using npx expo start - then using an android emulator. It works fine and the app does the bundle in the emulator. The problem is that I only see a splash screen, instead of the WelcomeView. The weird thing is that I can click on the screen (guess the location of the inputs and buttons) and it works (tries to login and etc.).
I do not understand why the screen itself won’t render, and I do not receive any error in my console.
Below is the relevant code:
AppEntry.js:
import registerRootComponent from ‘expo/build/launch/registerRootComponent’;
import AppWrapper from ‘…/…/AppWrapper’;
registerRootComponent(AppWrapper);
AppWrapper.tsx:
import {AppProvider, UserProvider} from ‘@realm/react’;
import React from ‘react’;
import App from ‘App’;
import WelcomeView from ‘@screens/WelcomeView’
import ‘expo-dev-client’;
import { Item } from ‘src/models/Item’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import { RootStackParamList } from ‘@constants/Navigation’;
import { RealmProvider } from ‘@realm/react’;
import { ActivityIndicator, View, StyleSheet } from ‘react-native’;
const Stack = createStackNavigator();
const LoadingIndicator = () => {
return (
);
};
const appId = “application-0-jxvhmeo”;
const baseUrl = “https://services.cloud.mongodb.com”
function AppWrapper() {
return (
<RealmProvider
schema={[Item]}
sync={{
flexible: true,
onError: (_session, error) => {
// Show sync errors in the console
console.error(error);
},
}}
fallback={LoadingIndicator}>
);
};const styles = StyleSheet.create({
activityContainer: {
flex: 1,
flexDirection: ‘row’,
justifyContent: ‘space-around’,
padding: 10,
},
});export default AppWrapper;
WelcomeView:
import React, {useCallback, useState} from ‘react’;
import Realm from ‘realm’;
import {useApp} from ‘@realm/react’;
import {SafeAreaProvider} from ‘react-native-safe-area-context’;
import {StyleSheet, Text, View, Alert} from ‘react-native’;
import {Input, Button} from ‘@rneui/base’;export default function WelcomeView(): React.ReactElement {
const [email, setEmail] = useState(‘’);
const [password, setPassword] = useState(‘’);// state values for toggable visibility of features in the UI
const [passwordHidden, setPasswordHidden] = useState(true);
const [isInSignUpMode, setIsInSignUpMode] = useState(true);const app = useApp();
// signIn() uses the emailPassword authentication provider to log in
const signIn = useCallback(async () => {
const creds = Realm.Credentials.emailPassword(email, password);
await app.logIn(creds);
}, [app, email, password]);// onPressSignIn() uses the emailPassword authentication provider to log in
const onPressSignIn = useCallback(async () => {
try {
await signIn();
} catch (error: any) {
Alert.alert(Failed to sign in: ${error?.message});
}
}, [signIn]);// onPressSignUp() registers the user and then calls signIn to log the user in
const onPressSignUp = useCallback(async () => {
try {
await app.emailPasswordAuth.registerUser({email, password});
await signIn();
} catch (error: any) {
Alert.alert(Failed to sign up: ${error?.message});
}
}, [signIn, app, email, password]);return (
My Sync App
Please log in or register with a Device Sync user account. This is
separate from your Atlas Cloud login.
<Input
placeholder=“password”
onChangeText={setPassword}
secureTextEntry={passwordHidden}
rightIcon={
<Button
title={passwordHidden ? ‘Show’ : ‘Hide’}
onPress={() => {
setPasswordHidden(!passwordHidden);
}}
/>
}
/>
{isInSignUpMode ? (
<>
<Button
title=“Already have an account? Log In”
type=“clear”
titleStyle={styles.secondaryButton}
onPress={() => setIsInSignUpMode(!isInSignUpMode)}
/>
</>
) : (
<>
<Button
title=“Don’t have an account? Create Account”
type=“clear”
titleStyle={styles.secondaryButton}
onPress={() => setIsInSignUpMode(!isInSignUpMode)}
/>
</>
)}
);
}const styles = StyleSheet.create({
viewWrapper: {
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
},
title: {
fontSize: 18,
},
subtitle: {
fontSize: 14,
padding: 10,
color: ‘gray’,
textAlign: ‘center’,
},
mainButton: {
width: 350,
backgroundColor: ‘#00684A’,
},
secondaryButton: {
color: ‘#00684A’,
},
});
I think that anything else is irrelevant, but if it does let me know and I will put the code here.
Thanks in advance.