Como alinhar a entrada de texto corretamente no react native?

A entrada de texto é alinhada ao centro, como corrigir esta entrada de texto para que receba a entrada do canto superior esquerdo

Aqui está meu css para entrada de texto

/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */

input: {
  flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
}

Eu tive o mesmo problema, mas as notas acima não resolveram. Há uma propriedade de estilo somente AndroidtextAlignVertical que corrige esse problema em entradas de várias linhas.

ie textAlignVertical: 'top'

TextInput tem preenchimento padrão, substitua-o definindo:

paddingTop: 0,
paddingBottom: 0

Github Issue

Eu encontrei a solução que no Android, o estilo TextInput textAlignVertical: 'top'funciona. mas no iOS, a propriedade TextInput multiline={true}funciona.

Tive um caso de uso semelhante em meu aplicativo iOS, em que a TextInputaltura do 'era 100 e o marcador aparecia no meio. Usei multiline={true}e fez o texto aparecer de cima. Espero que ajude.

Dê textAlignVertical : "top"isso resolverá seu problema.

<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />

Atualização 03/07/2015: as entradas de texto de várias linhas foram mescladas:

https://github.com/facebook/react-native/pull/991

Os exemplos de várias linhas que acompanham o React Native no UI Explorer devem funcionar conforme documentado.

O problema que você terá é que TextInput multilinha ainda não está funcionando corretamente e os documentos são enganosos. Por favor, veja este problema no Github:

https://github.com/facebook/react-native/issues/279

"Ainda não portamos essa funcionalidade para o código aberto."

Há algum código nesse problema que oferece funcionalidade mínima de várias linhas, então você pode conseguir fazê-lo funcionar com isso.

Funcionou para mim (RN 0.61.5):

<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />

Apenas caso você esteja procurando o código:

<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>

import { Dimensions} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);

// ...
intext: {
    height:screenHeight - 10,
    textAlignVertical: 'top',
    fontSize:17,
    padding:12,
    fontFamily:'courier',
    margin:10,     
},

Descobri por inspetor de elemento, que para iOS existe um paddingTop: 5for multiline TextInputs. Isso ainda foi aplicado, embora eu tenha definido paddingVertical: 15para todas as minhas entradas. O resultado foi um texto não centralizado em entradas de várias linhas no iOS. A solução foi adicionar adicionalmente um paddingTop: 15if the TextInputis multilinee a plataforma for iOS. Agora não há diferença visual entre entradas de linha única e multilinha em ambas as plataformas, Android e iOS.

Acho que é o padrão para iOS, para android no meu caso, adicionar paddingVertical: 0,estilo de texto funcionou.

As respostas acima fornecem o para iOS ou Android, o que pode ser bastante enganoso, então isso corrige para ambas as plataformas.

<TextInput
style={{
flex: 1,
width: "100%",
height: 150,
color: "#FFF",
textAlignVertical: "top", // android fix for centering it at the top-left corner 
}}
multiline={true} // ios fix for centering it at the top-left corner 
numberOfLines={10}
/>

Para Android -

style={{
//...
flex:1,
textAlignVertical: "top", // android fix for centering it at the top-left corner 
//...
}}

Para iOS, adicione multiline={true} ao <TextInput/>componente

Para obter o texto alinhado verticalmente no centro em ambas as plataformas, use:

Para uso Android textAlignVertical: "center"

Para uso ios justifyContent: "center"