android back button for leftIcon

[jamesholcomb]

Hi,

Trying to render a back button for Android using leftIcon and my custom <Button> component:

          leftIcon={Platform.select({
            android: (
              <Button
                onPress={navigation.goBack}
                iconStyle={{ color: "white" }}
                iconName="arrow-back"
              />
            )
          })}

but styles.leftIcon in this code

react-native-platform-searchbar/src/components/SearchBar/android/index.tsx

Lines 62 to 67 in 025c45f

	<View pointerEvents="box-none" style={styles.children}>
	{leftIcon ? (
	<View style={styles.leftIcon}>{leftIcon}</View>
	) : (
	<SearchIcon color={iconColor} style={styles.leftIcon} />
	)}

seems to be meant for styling an icon and not a passed component.

What do you suggest?

[bviebahn]

Hi,
not sure I understand correctly. Your problem is the View wrapping your custom leftIcon component right? I think it needs at least marginRight: 'auto' to look properly, but I'll have to test it. Or maybe there is a better way. I'll have a look at it tomorrow, or you can also submit a PR yourself if you want.

[jamesholcomb]

Correct, the View wrapping leftIcon.

Ultimately trying to achieve this (from react-native-elements)

[bviebahn]

Can you give some more information what you're having problems with? I don't see the problem with the current styling.

[jamesholcomb]

I tried another approach...this works to position the button:

          leftIcon={Platform.select({
            android: (
              <HeaderBackButton  /* from @react-navigation/elements@1.2.1 */
                onPress={this.onDone}
                style={{
                  position: "absolute",
                  marginLeft: -5,
                  marginTop: -5
                }}
              />
            )
          })}
          inputStyle={Platform.select({
            android: {
              marginLeft: 15,
              shadowOpacity: 0,
              shadowRadius: 0,
              shadowColor: "transparent",
              backgroundColor: "transparent"
            }
          })}

Without backgroundColor: "transparent", the android ripple will not show.

But now the hitSlop seems to be offset too far left (can only tap the button on the far left side of the icon).

EDIT: The hitSlop issue may be this: facebook/react-native#27232

[bviebahn]

I think you don't need to use position: "absolute", but this probably won't fix your problem. It probably makes sense to remove all styling from the wrapping View except marginRight: "auto".

I was able to reproduce the android ripple problem on react-native 0.63.2 and using Expo: https://snack.expo.dev/wJBeco7qC. Setting a ripple to borderless: true causes some weird layout problems. However I couldn't reproduce it in a clean react-native project using 0.66.3, so it looks like this has been fixed. Which version are you on?

[jamesholcomb]

0.65.2