Search code examples
react-nativereact-navigationnative-base

Native base checkbox shows hyphen instead of tick

I am using Native Base with React Navigation 5, the checkbox of native base shows hyphen (-) instead of a tick. Also the Content is not displaying text.

enter image description here

/**
 * @format
 */
import React from 'react';
import 'react-native-gesture-handler';
import { AppRegistry } from 'react-native';
// import NavigationInitializer from './route/NavigationSetup';
import { name as appName } from './app.json';
import { LogBox } from 'react-native';
import { Root, Container, CheckBox, Content, Header, Text, Footer, Body } from 'native-base';
LogBox.ignoreAllLogs(); // remove unnecessary warnings
//  This is useful when there's a noisy warning that cannot be fixed, like those in a third-party dependency.

// AppRegistry.registerComponent(appName, () => NavigationInitializer);

AppRegistry.registerComponent(appName, () => () =>
    <Container>
        <Header>
            <Body>
                <Text style={{ color: "#fff" }}>
                    Checkbox
                </Text>
                <CheckBox checked={true} />
            </Body>
        </Header>
        <Content style={{ backgroundColor: "purple" }}>
            <Text style={{ color: "black" }}>
                This is Content Section
            </Text>
        </Content>
        <Footer>
            <Text style={{ color: "black" }}>
                This is Footer Section
            </Text>
        </Footer>
    </Container>
);
Solution

  • Finally, I fixed it by manual linking:

    react-native link react-native-vector-icons

    As discussed here:

    https://github.com/GeekyAnts/NativeBase/issues/2855