@chamodanethra/react-native-fitted-text

react-native-fitted-text

A fully customizable group of text wrapper components each containing a single comparable text of same font size and the longest word just fitting its wrapper.

How to install

npm install @chamodanethra/react-native-fitted-text --save

Example 1

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {FittedTextGroup} from '@chamodanethra/react-native-fitted-text';

export default function App() {
  return (
    <View style={styles.container}>
      <FittedTextGroup
        group={['ABCDEFGHIJ', 'klmnopqrst', 1234567890]}
        groupStyles={styles.group}
        textStyles={styles.text}
        textWrapperStyles={styles.wrapper}
        cellStyles={styles.cell}
        children={[
          <View style={styles.child} />,
          <View style={styles.child} />,
          <View style={styles.child} />,
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 100,
    justifyContent: 'center',
    width: 300,
  },
  group: {flexDirection: 'row'},
  cell: {
    width: '100%',
    flex: 1,
    borderWidth: 1,
  },
  child: {
    backgroundColor: 'blue',
    flex: 2,
    width: '100%',
  },
  wrapper: {
    backgroundColor: 'green',
    width: '100%',
  },
  text: {
    color: 'black',
    textAlign: 'center',
  },
});

Example 2

import React from 'react';
import {View, StyleSheet} from 'react-native';
import {FittedTextGroup} from '@chamodanethra/react-native-fitted-text';

export default function App() {
  return (
    <View style={styles.container}>
      <FittedTextGroup
        group={['ABCDEFGHIJ', 'klmnnpqrs', 12345678]}
        groupStyles={styles.group}
        textStyles={styles.text}
        textWrapperStyles={styles.wrapper}
        cellStyles={styles.cell}
        children={[
          <View style={styles.child} />,
          <View style={styles.child} />,
          <View style={styles.child} />,
        ]}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 500,
    justifyContent: 'center',
    width: 300,
  },
  group: {flexDirection: 'column'},
  cell: {
    width: '100%',
    flex: 1,
    borderWidth: 1,
    backgroundColor: 'red',
  },
  child: {
    backgroundColor: 'blue',
    flex: 0,
    width: '100%',
  },
  wrapper: {
    backgroundColor: 'green',
    width: '80%',
    justifyContent: 'flex-end',
    alignSelf: 'center',
  },
  text: {
    color: 'black',
    textAlign: 'center',
  },
});