Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nothing is shown inside <Content>

See original GitHub issue

I’m experiencing the following problem: No mater what I set in Content nothing is visualized, not even a simple <Text>


import React, { Component } from 'react'
import { Container, Header, Body, Content, Title, Text } from 'native-base';
import LoginForm from './LoginForm'

export default class LoginPage extends Component {
    render() {
        return (
            <Container>
                <Header>
                    <Body>
                        <Title>Login</Title>
                    </Body>
                </Header>
                <Content>
                    <Text>Sample</Text>
                    <LoginForm />
                </Content>
            </Container>
        )
    }
}

import React, { Component } from 'react'
import { AsyncStorage, View } from 'react-native'
import { Field, reduxForm } from 'redux-form'
import { fetchStartupData, setAuthToken } from '../../actions/startupActions'
import { Button, Text, Form } from 'native-base';

import axios from '../../axios/authAxios'
import { withRouter } from 'react-router'
import renderInput from '../form/input'

class LoginForm extends Component {

    handleSubmitLog = (values) => {
        axios().post('/users/login', jsonToFormData(values))
            .then(res => res.data)
            .then(async (authToken) => {
                await AsyncStorage.setItem('authToken', authToken)
                this.props.dispatch(setAuthToken(authToken))
                this.props.history.push('/start')
                this.props.dispatch(fetchStartupData())
            })
    }

    render() {
        return (
            <View>
                <Form>
                    <Field name="email" keyboardType="email-address" component={renderInput} />
                    <Field name="password" secureTextEntry component={renderInput} />
                    <Button block primary onPress={this.handleSubmitLog}>
                        <Text>Submit</Text>
                    </Button>
                </Form>
            </View>
        )
    }

}

export default withRouter(reduxForm({
    form: 'login' // a unique identifier for this form
})(LoginForm))

It just shows an empty screen:

  "dependencies": {
    "axios": "^0.17.1",
    "native-base": "^2.3.5",
    "react": "16.0.0",
    "react-native": "0.51.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-native": "^4.2.0",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-form": "^7.2.0",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1"
  }

Any ideas ?

Issue Analytics

State:
Created 6 years ago
Comments:17 (7 by maintainers)

Top GitHub Comments

2reactions

iikmohcommented, Jan 15, 2018

Thanks @akhil-geekyants , solved by reinstalling react-native. After npm install react-native --save , react-native version changed to "^0.51.0"

1reaction

asaschacharcommented, Jul 15, 2019

Hi, I just ran into this issue and I believe it occurs when the <Container> component is wrapped in a <View> component that does not have { flex: 1 } styling. See minimally reproduce-able state showing the empty content:

https://snack.expo.io/@asametrical/native-base-content-empty

@akhil-geekyants and @AleksandarAleksandrov, I believe you all were having difficulty reproducing the error because the LoginPage was likely being rendered in a parent component (or native router) that wrapped it in a <View> which did not have { flex: 1 }. Does that sound accurate?

Removing the parent <View> components in the hierarchy renders the content in the above example. Adding { flex: 1 } to ALL parent components in the hierarchy will also fix the problem.