Cleanup UIExplorer folder

Summary: Move all JS to a js/ subfolder so we get some overview of this folder again. Reviewed By: bestander Differential Revision: D3542598 fbshipit-source-id: 7637133fe4152f4d39e461b443b38510272d5bc8
2025-11-01 09:14:26 +00:00 · 2016-07-12 05:59:13 -07:00
parent 7b7ecdf337
commit 2f73ca8f76
154 changed files with 633 additions and 23 deletions
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * The examples provided by Facebook are for non-commercial testing and
+ * evaluation purposes only.
+ *
+ * Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+ * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+'use strict';
+
+var React = require('react');
+var ReactNative = require('react-native');
+var {
+  Image,
+  StyleSheet,
+  View
+} = ReactNative;
+
+var styles = StyleSheet.create({
+  box: {
+    width: 100,
+    height: 100,
+    borderWidth: 2,
+  },
+  shadow1: {
+    shadowOpacity: 0.5,
+    shadowRadius: 3,
+    shadowOffset: {width: 2, height: 2},
+  },
+  shadow2: {
+    shadowOpacity: 1.0,
+    shadowColor: 'red',
+    shadowRadius: 0,
+    shadowOffset: {width: 3, height: 3},
+  },
+});
+
+exports.title = 'Box Shadow';
+exports.description = 'Demonstrates some of the shadow styles available to Views.';
+exports.examples = [
+  {
+    title: 'Basic shadow',
+    description: 'shadowOpacity: 0.5, shadowOffset: {2, 2}',
+    render() {
+      return <View style={[styles.box, styles.shadow1]} />;
+    }
+  },
+  {
+    title: 'Colored shadow',
+    description: 'shadowColor: \'red\', shadowRadius: 0',
+    render() {
+      return <View style={[styles.box, styles.shadow2]} />;
+    }
+  },
+  {
+    title: 'Shaped shadow',
+    description: 'borderRadius: 50',
+    render() {
+      return <View style={[styles.box, styles.shadow1, {borderRadius: 50}]} />;
+    }
+  },
+  {
+    title: 'Image shadow',
+    description: 'Image shadows are derived exactly from the pixels.',
+    render() {
+      return <Image
+        source={require('./hawk.png')}
+        style={[styles.box, styles.shadow1, {borderWidth: 0, overflow: 'visible'}]}
+      />;
+    }
+  },
+  {
+    title: 'Child shadow',
+    description: 'For views without an opaque background color, shadow will be derived from the subviews.',
+    render() {
+      return <View style={[styles.box, styles.shadow1, {backgroundColor: 'transparent'}]}>
+        <View style={[styles.box, {width: 80, height: 80, borderRadius: 40, margin: 8, backgroundColor: 'red'}]}/>
+      </View>;
+    }
+  },
+];