Add SVG as background to React Navigation tabBar React Native

Question

I have an SVG component (react-native-svg) that I would like to put behind a custom React Navigation tabBar component to act as a background for the bottom tabs navigator. I've tried a few different methods through styling and have arrived here realizing I have no idea what I'm doing with this. How can I place the SVG component behind my navigator? Here's what I have right now:

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View>
      <View>
        <View style={{ flexDirection: 'row' }}>
          {state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const label =
              options.tabBarLabel !== undefined
                ? options.tabBarLabel
                : options.title !== undefined
                ? options.title
                : route.name;

            const isFocused = state.index === index;

            const onPress = () => {
              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
              });

              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name);
              }
            };

            const onLongPress = () => {
              navigation.emit({
                type: 'tabLongPress',
                target: route.key,
              });
            };

            return (
              <TouchableOpacity
                accessibilityRole="button"
                accessibilityState={isFocused ? { selected: true } : {}}
                accessibilityLabel={options.tabBarAccessibilityLabel}
                testID={options.tabBarTestID}
                onPress={onPress}
                onLongPress={onLongPress}
                style={{ flex: 1, position: 'relative' }}
              >
                <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
                  {label}
                </Text>
              </TouchableOpacity>
            );
          })}
        </View>
      </View>
      <View>
        <SvgComponent/>
      </View>
    </View>
  );
}

Here's a Snack that shows the outcome of the above code.

score 0 · Answer 1 · answered May 09 '22 at 21:12

Here's my solution:

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View>
      <View style={{
        position:'absolute',
        bottom:0,
        width: '100%'
      }}>
        <SvgComponent/>
      </View>
      <View style={{ flexDirection: 'row' }}>
        {state.routes.map((route, index) => {
          console.log(descriptors)
          const { options } = descriptors[route.key];
          const label =
            options.tabBarLabel !== undefined
              ? options.tabBarLabel
              : options.title !== undefined
              ? options.title
              : route.name;

          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          return (
            <TouchableOpacity
              key={uuidv4()}
              accessibilityRole="button"
              accessibilityState={isFocused ? { selected: true } : {}}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{ flex: 1, position: 'relative' }}
            >
              <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
                {label}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
}

Add SVG as background to React Navigation tabBar React Native

1 Answers1