CODEWITHSUNDEEP
javascriptcssreact-native
Darc
Darc

Reputation: 873

React native component rendering differently when added as a child

I've got the following basic component which renders a TouchableOpacity with a LinearGradient as a background

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default class GradientButton extends React.Component {
  render() {
    return (
      <LinearGradient
        style={[styles.linearGradient, styles.btnLogWeight]}
        colors={['#085d87', '#27c7bb']}
        start={{x: 0, y: 1}}
        end={{x: 1, y: 0}}>
        <TouchableOpacity style={[{flex: 1}]} onPress={this.props.onPress}>
          <View style={[{flex: 1}]} />
          <Text style={styles.buttonText}>{this.props.text}</Text>
          <View style={[{flex: 1}]} />
        </TouchableOpacity>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  btnLogWeight: {
    margin: 10,
  },
  linearGradient: {
    flex: 1,

    borderRadius: 30,
  },
  buttonText: {
    fontSize: 16,
    textAlign: 'center',

    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

Which I've tested and it works fine however when I attempt to use it on one of my screens I'm getting different results depending on how deep into my screens hierarchy the button is added.

import React from 'react';
import BaseScreen from 'components/BaseScreen';
import {StyleSheet, View, Text} from 'react-native';
import GradientButton from 'components/GradientButton';

class DataEntryScreen extends React.Component {
  render() {
    return (
      <BaseScreen>
        <View style={[styles.flexExpander]}>
          <Text style={[styles.whiteText]}>{this.props.descc}</Text>
          {this.props.children}
          <View style={[styles.flexExpander]} />

          <GradientButton text="Back" />
          <GradientButton text="Next" />
          <View>
            <GradientButton text="Back" />
            <GradientButton text="Next" />
          </View>
          <View style={[styles.buttonRow]}>
            <GradientButton text="Back" />
            <GradientButton text="Next" />
          </View>
        </View>
      </BaseScreen>
    );
  }
}

export default DataEntryScreen;

const styles = StyleSheet.create({
  whiteText: {
    color: '#e8e8e8',
    fontSize: 20,
  },
  buttonRow: {
    flexDirection: 'row',
    padding: 10,
  },
  flexExpander: {
    flex: 1,
  },
});

Where BaseScreen is a simple wrapper:

import React from 'react';
import {StyleSheet, SafeAreaView} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

class BaseScreen extends React.Component {
  render() {
    return (
      <LinearGradient
        colors={['#085d87', '#27c7bb']}
        start={{x: 0, y: 1}}
        end={{x: 1, y: 0}}
        style={{flex: 1}}>
        <SafeAreaView style={styles.container}>
          {this.props.children}
        </SafeAreaView>
      </LinearGradient>
    );
  }
}

export default BaseScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    borderRadius: 15,
    borderWidth: 3,
    margin: 5,

    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    borderColor: 'rgba(0, 0, 0, 0.5)',
  },
});

This produces the following output:

enter image description here

As you can see, despite the 3 sets of buttons being added in the same way, the ones added under a view (both styled and unstyled) are rendered differently. In addition the buttons that aren't rendered are not clickable

Is there some limit to how deep a component can go or something that I'm just not aware of here? Given the text element is white on all of the buttons there is at least some level of style still applying to the buttons.

Thanks for any help that can be provided

Upvotes: 0

Views: 226

Answers (1)

OT413
OT413

Reputation: 121

You might need give flex:1 to the parent views of the Gradient Button.

<View style={{flex:1}}>
      <GradientButton text="Back" />
      <GradientButton text="Next" />
</View>

Also add it the bottomRow style.

buttonRow: {
    flex:1,
    flexDirection: 'row',
    padding: 10,
  },

Upvotes: 1

Related Questions