Search code examples
iosreact-nativebuttoncustomizationreact-native-stylesheet

Custom Button Design "Sign in with Apple" in React-native

I want to add "Sign in with Apple" functionality in my React-native application. I have search and googled it but not able to customise my Apple Button But forcing to use default apple button. How can I achieve this if it is possible. I want this Design.

enter image description here

Solution

  • Yes, I have achieved this, and Apple has approved this too. I am using "react-native-apple-authentication" library (Quite a simple library).

                      {Platform.OS === 'ios' && <View>
                    <ImgButtonComp
                      iconRight={require('../../../assets/apple-icon.png')}
                      onPress={SignInWithAppleButton({
                        callBack: this.appleSignIn,
                      })}
                      isloading={this.state.setAppleLoading}
                      text={Trans.translate("sign_in_with_apple")}
                      style={{ backgroundColor: 'white', borderColor: "#000000", borderWidth: 1.5 }}
                      textcolor='black'
                      iconLeft={require('../../../assets/polygon.png')}
                    />
                    <View style={{ position: 'absolute', width: '100%', height: 60 }}>
                      {SignInWithAppleButton({
                        buttonStyle: { height: 60 },
                        callBack: this.appleSignIn,
                        buttonText: " ",
                      })}
                    </View>
                  </View>}

    In above code, 'ImgButtonComp' is my apple button according to Design, below this, I used transparent button 'View' over it, given by Apple. Now it is working perfectly fine.