CODEWITHSUNDEEP
react-nativeflexbox
endlessCode
endlessCode

Reputation: 1405

React native align icon and text

for the love of God, every styling i put on the stylesheet doesn't change anything.

i tried style the view, sectionheader & sectionbox but no luck

i want to align 4 icons in the boxsection and text below then as such, please any help would be appreciated.

enter image description here enter image description here

enter image description here enter image description here 

 export default class HomePage extends Component {
      render() {
        return (
          <View> 

            <SectionHeader title={'Food'} />
            <View >
             <SectionBox >
              <Icon style={styles.icons} name="icon name"  size={50} />
              <Icon style={styles.icons} name="icon name"  size={50} />
              <Icon style={styles.icons} name="icon name"  size={50} />
              <Icon style={styles.icons} name="icon name"  size={50} />

                <Text style={styles.sectiontext}>burgers</Text>
              </SectionBox>
            </View>

        const styles = StyleSheet.create({
          icons: {
            flexDirection: 'row',
            paddingTop: 7,
            paddingLeft: 5,



          },
          sectiontext: {
            fontSize: 15,
            fontWeight: 'bold',
            paddingLeft: 5,
            alignItems: 'center',
          }


        });

Upvotes: 3

Views: 12390

Answers (2)

fv_dev
fv_dev

Reputation: 101

For the icons-containing-box you would need to indicate flexDirection and flexWrap, not directly on the icon's style. Then to get the text below each icon you need to wrap icon and text in its own view and give that 'column' direction.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Constants } from 'expo';

const ICON_SIZE = 70;
const FONT_SIZE = 18;

const getItem = () => (
  <View style={styles.iconStyle}>
    <Ionicons name="md-checkmark-circle" size={ICON_SIZE} color="green" />
    <Text style={styles.textStyle}>name</Text>
  </View>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.iconContainer}>
          {getItem()}
          {getItem()}
          {getItem()}
          {getItem()}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconContainer: {
    width: ICON_SIZE * 2,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  iconStyle: {
    flexDirection: 'column',
    alignItems: 'center',
    padding: 5,
  },
  textStyle: {
    fontSize: FONT_SIZE,
  },
});

Upvotes: 2

Mathias Silva
Mathias Silva

Reputation: 71

You need a view for each group of icon and text with a flexDirection: 'column' and one another view for each row (or column), like the example below:

https://snack.expo.io/HJY7IWsFm

Other option is to use a GridView lib:

https://github.com/saleel/react-native-super-grid

Upvotes: 1

Related Questions