Question 34381 in React native Question posted in
The official React Native documentation can be found here.

Can I word-break at a specific character with react native?

I’m using react native to create a category table.
Is there any way I can make the characters(texts) inside the table to line break at after or before a specific character?

for example : apple/banana/avocado

I want it to render like this (line break at after ‘slashes’) :
apple/banana/</ br>avocado

Thanks,

Tags:

3

Answers


  1. 0

    Yes, it is possible. Like in a normal react application you can use the following javascript functions:

    • Split your string on each "/", example:

    var elements = yuourString.split(///)

    • Then you can use Map to render an object for each element, example:

    elements.map(x => <SomeReactNativeComponent />);

    Login or Signup to reply.
  2. 0

    You could take match instead of split by taking some non breaking character, a breaking character and other non breking character.

    const names='banana/apple/mango/grapes';
const result=names.match(/([A-z]+/[A-z]+)/g);
console.log(result)

    After breaking the names into an array you can simply map them in react native

    Login or Signup to reply.
  3. 0

    Expanding on my comment demo:

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

const string = 'apple/banana/avocado';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{ marginBottom: 10 }}>
        Before Change:{'n '} {string}
      </Text>
      <Text style={{ marginBottom: 10 }}>
        After Change:{'n '} {string.replaceAll('/', 'n  ')}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search