1

I'm trying to build a simple login screen. However when I try to justify the content to center, the elements will not stop jumping up and down. . If I remove flex or justifyContent attributes it stops jumping. My code looks like this

export default class LoginScreen extends React.Component {

  render() {
    return (
      <View style={Styles.container} >
        <Text>Hello world</Text>
     </View>
  )}



let Styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    // padding: 15,
    // backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
)

My App.js looks like this

import { Platform } from 'react-native';
import { Navigation } from 'react-native-navigation';
import registerScreens from './app/Screens';

import {
  AppRegistry,
  Text,
} from 'react-native';
registerScreens();

let tabs = [
    {
      label: 'Login',
      screen: 'tasks.LoginScreen', // this is a registered name for a screen
      icon: require('./assets/account_circle.png'),
      // selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Hello world'
    },
    {
      label: 'Two',
      screen: 'tasks.CreateUserScreen',
      icon: require('./assets/account_circle.png'),
      // selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]

Navigation.startTabBasedApp({
  tabs,
  animationType: Platform.OS === 'ios' ? 'slide-down' : 'fade',
  tabsStyle: {
    tabBarBackgroundColor: '#003a66',
    tabBarButtonColor: '#ffffff',
    tabBarSelectedButtonColor: '#ff505c',
    tabFontFamily: 'BioRhyme-Bold',
  },
  appStyle: {
    tabBarBackgroundColor: '#003a66',
    navBarButtonColor: '#ffffff',
    tabBarButtonColor: '#ffffff',
    navBarTextColor: '#ffffff',
    tabBarSelectedButtonColor: '#ff505c',
    navigationBarColor: '#003a66',
    navBarBackgroundColor: '#003a66',
    statusBarColor: '#002b4c',
    tabFontFamily: 'BioRhyme-Bold',
  },
  drawer: {
    left: {
      screen: 'tasks.LoginScreen'
    }
  }
});
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user133688
  • 6,864
  • 3
  • 20
  • 36
  • Can u provide screenshot or gif for the jumps in the login screen? BTW there is nothing wrong with your login screen code. – Ravi Raj Dec 05 '17 at 12:28
  • I'm experiencing exactly the same issue, here's a .GIF of the issue. https://i.gyazo.com/644cb6c6c309ce83ca7dae881f6342f1.gif – Kevin Østerkilde Dec 05 '17 at 12:31

1 Answers1

0

After trying to solve this issue in my own application, I've come to the point where the only solution is to downgrade React-Native from 0.50.x to 0.49.x - At least, that's what fixed it on my end.

Kevin Østerkilde
  • 177
  • 2
  • 8