Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal is not transparent on Android #24976

Closed
nes123 opened this issue May 21, 2019 · 2 comments
Closed

Modal is not transparent on Android #24976

nes123 opened this issue May 21, 2019 · 2 comments
Labels
Bug Component: Modal Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.

Comments

@nes123
Copy link

nes123 commented May 21, 2019

Modal behaves well on IOS and is transparent while on android it shows with white background

React Native version:

System:
OS: macOS 10.14.4
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Memory: 13.21 GB / 32.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.3 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
IDEs:
Android Studio: 3.4 AI-183.5429.30.34.5452501
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: ^16.8.6 => 16.8.6
react-native: ^0.59.8 => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

run the following rendering:
render() {return(<Modal visible={true} transparent={true}/>)}

Describe what you expected to happen:

Show transparent modal

@Hermanyo
Copy link
Contributor

Can you provide a minimal reproduce? Because it worked for me, I tested it in my android with code below:

https://facebook.github.io/react-native/docs/modal

I just doing

render() {
    return (
      <View style={{ alignItems: 'center', justifyContent: 'center', marginTop: 22, height: '100%', backgroundColor: 'white' }}>
       
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{ marginTop: 22, alignItems: 'center', }}>
            <View>
              <Text style={{color:'black'}}>Hello World!</Text>

              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}>
                <Text style={{ color:'black' }}>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal> 
        <TouchableHighlight
          onPress={() => {
            this.setModalVisible(true);
          }}>
          <Text style={{ color:'black' }}>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  } 

with transparent true/false

@dulmandakh
Copy link
Contributor

Please provide reproducible demo code. I'll re-open the issue once we have demo code. Thank you

@facebook facebook locked as resolved and limited conversation to collaborators Jun 17, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jun 17, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: Modal Platform: Android Android applications. Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

4 participants