Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React native KeyboardAvoidingView making Text disappear

$
0
0

I'm trying to implement KeyboardAvoidingView, although whenever I insert it, a single Text disappears from my screen. This text is in the middle of two other components.
How I tried to implement:

import React from 'react';import {  Container,  TitleContainer,  Title,  ArrowContainer,  ArrowTouchable,  FieldsContainer,} from './styles';import i18n from 'i18n-js';import ArrowBack from '../../assets/arrowBack.svg';import { InputField } from '../../components/InputField';import EmailSVG from '../../assets/email.svg';import PasswordSVG from '../../assets/password.svg';import { Keyboard, KeyboardAvoidingView, TouchableWithoutFeedback } from 'react-native';export function Register({ navigation }: any) {  return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><KeyboardAvoidingView behavior="position" enabled><Container><ArrowContainer><ArrowTouchable onPress={() => navigation.navigate('Welcome')}><ArrowBack width={24} height={24} /></ArrowTouchable></ArrowContainer><TitleContainer><Title>{i18n.t('signup.title')}</Title></TitleContainer><FieldsContainer><InputField text={i18n.t('signup.email')} Icon={EmailSVG} /><InputField text={i18n.t('signup.password')} Icon={PasswordSVG} /></FieldsContainer></Container></KeyboardAvoidingView></TouchableWithoutFeedback>  );}

What happens:enter image description here

When I remove it:enter image description here

The style:

export const TitleContainer = styled.View`  width: 100%;  margin-top: 67.75px;  align-items: start;  justify-content: center;`;export const Title = styled.Text`  color: ${({ theme }) => theme.colors.text};  font-family: ${({ theme }) => theme.fonts.bold};  font-size: ${RFValue(35)}px;  letter-spacing: ${({ theme }) => theme.fonts.letter_spacing}px;`;

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>