{"ast":null,"code":"var _jsxFileName = \"/Users/nishan/Desktop/oss/responsive-breakpoints/example/src/App.tsx\",\n    _this = this;\n\nimport * as React from 'react';\nimport ScrollView from \"react-native-web/dist/exports/ScrollView\";\nimport StyleSheet from \"react-native-web/dist/exports/StyleSheet\";\nimport View from \"react-native-web/dist/exports/View\";\nimport { useResponsiveQuery } from \"/Users/nishan/Desktop/oss/responsive-breakpoints/src/index\";\nexport default function App() {\n  var _useResponsiveQuery = useResponsiveQuery({\n    initial: {\n      backgroundColor: 'yellow',\n      height: 200,\n      width: 200\n    },\n    query: [{\n      minWidth: 400,\n      style: {\n        height: 300,\n        width: 300,\n        backgroundColor: 'pink'\n      }\n    }, {\n      minWidth: 800,\n      style: {\n        height: 400,\n        width: 400,\n        backgroundColor: 'black'\n      }\n    }, {\n      minWidth: 900,\n      maxWidth: 1000,\n      style: {\n        height: 50,\n        width: 50,\n        backgroundColor: 'gold'\n      }\n    }, {\n      minWidth: 1300,\n      style: [StyleSheet.create({\n        wrapper: {\n          height: 600,\n          width: 600\n        }\n      }).wrapper, {\n        width: 600,\n        backgroundColor: 'purple'\n      }]\n    }]\n  }),\n      dataSet = _useResponsiveQuery.dataSet,\n      styles = _useResponsiveQuery.styles;\n\n  return React.createElement(ScrollView, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 58,\n      columnNumber: 5\n    }\n  }, React.createElement(View, {\n    dataSet: dataSet,\n    style: styles,\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 59,\n      columnNumber: 7\n    }\n  }), React.createElement(View, {\n    style: {\n      height: 20\n    },\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 65,\n      columnNumber: 7\n    }\n  }), React.createElement(GetResponsiveStyleExample, {\n    __self: this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 66,\n      columnNumber: 7\n    }\n  }));\n}\n\nvar GetResponsiveStyleExample = function GetResponsiveStyleExample() {\n  var _useResponsiveQuery2 = useResponsiveQuery(),\n      getResponsiveStyles = _useResponsiveQuery2.getResponsiveStyles;\n\n  var _getResponsiveStyles = getResponsiveStyles({\n    initial: {\n      backgroundColor: 'yellow',\n      height: 200,\n      width: 200\n    },\n    query: [{\n      minWidth: 400,\n      style: {\n        height: 300,\n        width: 300,\n        backgroundColor: 'pink'\n      }\n    }, {\n      minWidth: 800,\n      style: {\n        height: 400,\n        width: 400,\n        backgroundColor: 'black'\n      }\n    }]\n  }),\n      dataSet = _getResponsiveStyles.dataSet,\n      styles = _getResponsiveStyles.styles;\n\n  return React.createElement(View, {\n    dataSet: dataSet,\n    style: styles,\n    __self: _this,\n    __source: {\n      fileName: _jsxFileName,\n      lineNumber: 101,\n      columnNumber: 5\n    }\n  });\n};","map":{"version":3,"sources":["/Users/nishan/Desktop/oss/responsive-breakpoints/example/src/App.tsx"],"names":["React","useResponsiveQuery","App","initial","backgroundColor","height","width","query","minWidth","style","maxWidth","StyleSheet","create","wrapper","dataSet","styles","GetResponsiveStyleExample","getResponsiveStyles"],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { ScrollView, StyleSheet, View } from 'react-native';\nimport { useResponsiveQuery } from 'react-native-responsive-query';\n\nexport default function App() {\n  const { dataSet, styles } = useResponsiveQuery({\n    initial: {\n      backgroundColor: 'yellow',\n      height: 200,\n      width: 200,\n    },\n    query: [\n      {\n        minWidth: 400,\n        style: {\n          height: 300,\n          width: 300,\n          backgroundColor: 'pink',\n        },\n      },\n      {\n        minWidth: 800,\n        style: {\n          height: 400,\n          width: 400,\n          backgroundColor: 'black',\n        },\n      },\n      {\n        minWidth: 900,\n        maxWidth: 1000,\n        style: {\n          height: 50,\n          width: 50,\n          backgroundColor: 'gold',\n        },\n      },\n      {\n        minWidth: 1300,\n        style: [\n          StyleSheet.create({\n            wrapper: {\n              height: 600,\n              width: 600,\n            },\n          }).wrapper,\n          {\n            width: 600,\n            backgroundColor: 'purple',\n          },\n        ],\n      },\n    ],\n  });\n\n  return (\n    <ScrollView>\n      <View\n        //@ts-ignore - web only prop\n        dataSet={dataSet}\n        style={styles}\n      />\n\n      <View style={{ height: 20 }} />\n      <GetResponsiveStyleExample />\n    </ScrollView>\n  );\n}\n\nconst GetResponsiveStyleExample = () => {\n  const { getResponsiveStyles } = useResponsiveQuery();\n\n  const { dataSet, styles } = getResponsiveStyles({\n    initial: {\n      backgroundColor: 'yellow',\n      height: 200,\n      width: 200,\n    },\n    query: [\n      {\n        minWidth: 400,\n        style: {\n          height: 300,\n          width: 300,\n          backgroundColor: 'pink',\n        },\n      },\n      {\n        minWidth: 800,\n        style: {\n          height: 400,\n          width: 400,\n          backgroundColor: 'black',\n        },\n      },\n    ],\n  });\n\n  return (\n    <View\n      //@ts-ignore - web only prop\n      dataSet={dataSet}\n      style={styles}\n    />\n  );\n};\n"]},"metadata":{},"sourceType":"module"}