Allow touchable to be stylable

[mmehmetAliIzci]

Overview

Based on issue: #216

There is a problem on how react-native-web handles the transformation when it comes to flex, absolute and relative positioning. Basically Text container (TouchableOpacity in our case) is not expanding to full size.

Thus I opened API for TouchableOpacity styles. This will allow users to change actual padding of the clickable area. No backwards compat introduced, very small code change but this will grant devs more power when it comes to styling.

Since library uses different components for IOS and android:

• in ios we can prepend styles to RNCSegmentedControlNativeComponent,
• in android we can add it to the TouchableOpacity

Test Plan

I dont see any tests in the library so here is my video:

Screen.Recording.2021-06-07.at.17.22.20.mov

If you would like to test it yourself, just point your dependency to my branch:

"@react-native-segmented-control/segmented-control": "https://github.com/mmehmetAliIzci/segmented-control.git#feat/touchable-styles",

[Naturalclar]

@mmehmetAliIzci thanks so much for offering to help!

I have some changes id like to request.

Could you rename touchableStyle to tabStyle and keep the changes to non-iOS files?

touchableStyle on iOS wont actually change the style on a single tab, so it would make it a bit confusing.

Thanks :)

[mmehmetAliIzci]

Hi @Naturalclar !

Thanks for your response, i've just renamed the prop and add additonal tips and tricks section because of other questions i see in:

#138

[Naturalclar]

@mmehmetAliIzci thank you so much! LGTM!