oblador / react-native-lightbox

Images etc in Full Screen Lightbox Popovers for React Native
MIT License
2.82k stars 502 forks source link

Add backgroundPosition props #115

Open nitaking opened 5 years ago

nitaking commented 5 years ago

About

What want to do:

I wanna control the position of the content component.

Example, I wanna put content in flex-start instead of center.

Add:

Add backgroundPosition props.

ScreenShot

flex-start

        <Lightbox 
          underlayColor="white"
          backgroundColor="grey"
++        backgroundPosition="flex-start"
          onOpen={() => this.setState({ isShowContent: true })}
          willClose={() => this.setState({ isShowContent: false })}
        >
          <View style={{ backgroundColor: 'blue' }}>
            <Text style={{ color: 'white' }} >TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</Text>
            {this.state.isShowContent && 
              <View style={{ backgroundColor: 'green' }}>
                <Text>
                  ContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContents
                </Text>
              </View>
            }
          </View>
        </Lightbox>

flex-end

        <Lightbox 
          underlayColor="white"
          backgroundColor="grey"
++        backgroundPosition="flex-end"
          onOpen={() => this.setState({ isShowContent: true })}
          willClose={() => this.setState({ isShowContent: false })}
        >
          <View style={{ backgroundColor: 'blue' }}>
            <Text style={{ color: 'white' }} >TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</Text>
            {this.state.isShowContent && 
              <View style={{ backgroundColor: 'green' }}>
                <Text>
                  ContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContentsContents
                </Text>
              </View>
            }
          </View>
        </Lightbox>
nitaking commented 5 years ago

@oblador How about that?