React-native-snap-carousel not compatible with React Native Web causing TypeError

Expo SDK
1

Getting the error TypeError: Cannot read property 'style' of undefined when running expo web. I think it’s to do with ViewPropTypes being deprecated. How can I fix this for web? I’m currently using Expo and React Native. Problem replicated in react-native-snap-carousel - Snack has shown

2

Trying to figure out a similar error too. It absolutely is related to ViewPropTypes being deprecated, however I haven’t been able to find a solution.

Any luck?

3

So going based on a script I saw on the React Native Web Github issue queue:

https://github.com/necolas/react-native-web/issues/1537

I’ve made some edits to account for TextPropTypes as well, and after using this script (you’ll need to install the npm package postinstall), everything compiles correctly as far as I can tell (there is a warning in the console log). Just put this in your root directory as fix.py, and add a postinstall script to package.json:

import os
import sys

print("✅ Fixing PropTypes issues")
dir_path = os.path.dirname(os.path.realpath(__file__))
rnw_filename = dir_path + "/./node_modules/react-native-web/dist/index.js"
rnw_text_filename = dir_path + "/./node_modules/react-native-web/dist/exports/Text/index.js"


def append_new_line(file_name, text_to_append):
    """Append given text as a new line at the end of file"""

    if text_to_append in open(file_name).read():
        print("⏭️  Skipping...")
    else:
        with open(file_name, "a+") as file_object:
            file_object.write("\n")
            file_object.write(text_to_append)
            file_object.close()

def replace_line(file_name, line_num, text):
    lines = open(file_name, 'r').readlines()
    lines[line_num] = text
    out = open(file_name, 'w')
    out.writelines(lines)
    out.close()


# Fix
append_new_line(rnw_filename, "export const ViewPropTypes = { style: null };")
replace_line(rnw_text_filename, -1, "Text.propTypes = {style: null};")
append_new_line(rnw_text_filename, "export default Text;")
1 Like
5

Thanks!

6

Thanks. It works. But I modified it as below because of another warning.

# Fix
append_new_line(rnw_filename, "export const ViewPropTypes = { style: () => null };")
replace_line(rnw_text_filename, -1, "Text.propTypes = {style: () => null};")
7

I have that same problem. did you find a solution? react-native-snap-carousel for using the component react native web?

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.