Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TextInput - TextAlign not working at all #2445

Closed
Flip32 opened this issue Dec 17, 2020 · 3 comments
Closed

TextInput - TextAlign not working at all #2445

Flip32 opened this issue Dec 17, 2020 · 3 comments
Labels

Comments

@Flip32
Copy link

Flip32 commented Dec 17, 2020

Current behaviour

The style textAlign is not working.

Expected behaviour

I tried to align center using the textAlign, but nothing happens. So, I tried 'right' and 'left' and still not working.
I'd like to keep the container aligned center and the textInput with the same behavior inside.

Code sample

https://snack.expo.io/@humbertocruz/rude-peach

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card, TextInput } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
      <TextInput textAlign={'right'} style={{padding:10, borderBottomWidth:2, borderColor:'#369', textAlign:'center'}} placeholder={'Senha'} secureTextEntry={true} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

What have you tried

I tried to workaround styling with some ViewProps, using flexDirection row and justify and alignItens center, but the input hide the 2 first caracteres, only in ios, and only when number digited was the number 1. But I didn't like this behavior.

Your Environment

software version

"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native": "0.62",
"react-native-paper": "^4.2.0",
"react-native-vector-icons": "^6.6.0",
node: 12.20.0
npm: 6.14.8
yarn: 1.22.5
"expo": "^38.0.9"

@github-actions
Copy link

Couldn't find version numbers for the following packages in the issue:

  • react-native

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

  • react-native-paper (found: 4.2.0, latest: 4.5.0)
  • react-native-vector-icons (found: 6.6.0, latest: 7.1.0)
  • npm (found: 6.14.8, latest: 6.14.9)
  • yarn (found: 1.22.5, latest: 1.22.10)
  • expo (found: 38.0.9, latest: 40.0.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

@RichardLindhout
Copy link
Contributor

This is fixed in newer react-native paper versions

@github-actions
Copy link

github-actions bot commented Mar 8, 2021

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants